@penskemediacorp/larva-patterns 0.7.2 → 0.7.5

package/__tests__/vlanding/vlanding.html

@@ -1,4 +1,5 @@
 <div>
+	{% include "@larva/modules/header/header.twig" with header %}
 	{% include "@larva/modules/vlanding-video-showcase/vlanding-video-showcase.twig" with vlanding_video_showcase %}
 	{% include "@larva/modules/vlanding-playlist/vlanding-playlist.twig" with vlanding_playlist %}
 	{% include "@larva/modules/vlanding-playlist/vlanding-playlist.twig" with vlanding_playlist %}

package/__tests__/vlanding/vlanding.prototype.js

@@ -1,9 +1,11 @@
 const clonedeep = require( 'lodash.clonedeep' );
 
+const header = clonedeep( require( '../../modules/header/header.prototype' ) );
 const vlanding_video_showcase = clonedeep( require( '../../modules/vlanding-video-showcase/vlanding-video-showcase.prototype' ) );
 const vlanding_playlist = clonedeep( require( '../../modules/vlanding-playlist/vlanding-playlist.prototype' ) );
 
 module.exports = {
 	vlanding_video_showcase: vlanding_video_showcase,
-	vlanding_playlist: vlanding_playlist
+	vlanding_playlist: vlanding_playlist,
+	header: header
 };

package/components/c-input/c-input.prototype.js

@@ -4,6 +4,5 @@ module.exports = {
 	c_input_label_class: 'lrv-a-screen-reader-only',
 	c_input_label_text: 'Input Example',
 	c_input_class: '',
-	c_input_name: 'input_example',
 	c_input_placeholder_attr: 'Enter text.',
 };

package/components/c-input/c-input.twig

@@ -1,9 +1,10 @@
-<label class="c-input" for="{{ id_attr }}">
+<label class="c-input" for="{{ c_input_id_attr }}">
 	<span class="{{ c_input_label_class }}">{{ c_input_label_text }}</span>
 	<input
+		id="{{ c_input_id_attr }}"
 		type="{{ c_input_type_attr }}"
 		class="{{ c_input_class }}"
-		name="{{ c_input_name }}"
+		name="{{ c_input_id_attr }}"
 		placeholder="{{ c_input_placeholder_attr }}"
 		aria-invalid="{{ c_input_aria_invalid_attr }}"
 		data-error="{{ c_input_error_attr }}"

package/components/c-lazy-image/c-lazy-image.prototype.js

@@ -12,5 +12,6 @@ module.exports = {
 	c_lazy_image_sizes_attr: 'auto',
 	c_lazy_image_img_classes: 'lrv-u-background-color-grey-lightest lrv-u-width-100p lrv-u-display-block lrv-u-height-auto',
 	c_lazy_image_height_attr: '',
-	c_lazy_image_width_attr: ''
-}
+	c_lazy_image_width_attr: '',
+	c_lazy_image_in_initial_viewport: false
+}

package/components/c-lazy-image/c-lazy-image.twig

@@ -14,7 +14,11 @@
 	{% if c_lazy_image_markup %}
 		{{ c_lazy_image_markup }}
 	{% else %}
-		<img class="c-lazy-image__img {{ c_lazy_image_img_classes }}" src="{{ c_lazy_image_placeholder_url }}" data-lazy-src="{{ c_lazy_image_src_url }}" alt="{{ c_lazy_image_alt_attr }}" data-lazy-srcset="{{ c_lazy_image_srcset_attr }}" data-lazy-sizes="{{ c_lazy_image_sizes_attr }}" height="{{ c_lazy_image_height_attr }}" width="{{ c_lazy_image_width_attr }}">
+		{% if c_lazy_image_in_initial_viewport %}
+			<img class="c-lazy-image__img {{ c_lazy_image_img_classes }}" src="{{ c_lazy_image_src_url }}" alt="{{ c_lazy_image_alt_attr }}" srcset="{{ c_lazy_image_srcset_attr }}" sizes="{{ c_lazy_image_sizes_attr }}" height="{{ c_lazy_image_height_attr }}" width="{{ c_lazy_image_width_attr }}">
+		{% else %}
+			<img class="c-lazy-image__img {{ c_lazy_image_img_classes }}" src="{{ c_lazy_image_placeholder_url }}" data-lazy-src="{{ c_lazy_image_src_url }}" alt="{{ c_lazy_image_alt_attr }}" data-lazy-srcset="{{ c_lazy_image_srcset_attr }}" data-lazy-sizes="{{ c_lazy_image_sizes_attr }}" height="{{ c_lazy_image_height_attr }}" width="{{ c_lazy_image_width_attr }}">
+		{% endif %}
 	{% endif %}
 
 	{% if c_lazy_image_crop_class %}

package/modules/age-gate/age-gate.prototype.js

@@ -1,20 +1,21 @@
 const clonedeep = require('lodash.clonedeep');
 
-const c_svg = clonedeep(require('@penskemediacorp/larva-patterns/components/c-svg/c-svg.prototype'));
+const c_svg_prototype = require('@penskemediacorp/larva-patterns/components/c-svg/c-svg.prototype');
 const c_heading = clonedeep(require('@penskemediacorp/larva-patterns/components/c-heading/c-heading.prototype'));
 const o_input_group = clonedeep(require('@penskemediacorp/larva-patterns/objects/o-input-group/o-input-group.prototype'));
 const c_button = clonedeep(require('@penskemediacorp/larva-patterns/components/c-button/c-button.prototype'));
 const c_dek = clonedeep(require('@penskemediacorp/larva-patterns/components/c-dek/c-dek.prototype'));
 
-c_svg.c_svg_name = 'brand-logo-white';
-c_svg.c_svg_classes = 'lrv-u-width-150 lrv-u-margin-lr-auto lrv-u-margin-b-2';
+const c_svg_header = clonedeep(c_svg_prototype);
+c_svg_header.c_svg_name = 'brand-logo-white';
+c_svg_header.c_svg_classes = 'lrv-u-width-150 lrv-u-margin-lr-auto lrv-u-margin-b-2';
 
-c_heading.c_heading_classes += ' lrv-u-margin-b-2';
+c_heading.c_heading_classes += ' lrv-a-font-primary-l lrv-u-margin-b-2';
 c_heading.c_heading_text = 'You must be 21 to enter.';
 
 o_input_group.o_input_group_class = 'lrv-u-margin-b-2';
 o_input_group_item = clonedeep( o_input_group.o_input_group_items[0] );
-o_input_group_item.c_input_class = 'lrv-u-font-size-32 lrv-u-color-white lrv-u-background-color-grey-darkest lrv-u-padding-lr-050 lrv-u-padding-tb-150 lrv-u-width-100 lrv-u-text-align-center';
+o_input_group_item.c_input_class = 'lrv-a-font-primary-m lrv-u-color-white lrv-u-background-color-grey-darkest lrv-u-padding-lr-050 lrv-u-padding-tb-150 lrv-u-width-100 lrv-u-text-align-center';
 o_input_group_item.c_input_size_attr = 2;
 o_input_group_item.c_input_maxlength_attr = 4;
 
@@ -22,18 +23,34 @@ o_input_day_item = clonedeep( o_input_group_item );
 o_input_month_item = clonedeep( o_input_group_item );
 o_input_year_item = clonedeep( o_input_group_item );
 
-o_input_day_item.c_input_placeholder_attr = 'DD';
 o_input_month_item.c_input_placeholder_attr = 'MM';
+o_input_month_item.c_input_id_attr = 'pmc-age-gate-month';
+o_input_month_item.c_input_error_attr = 'Please enter a valid month';
+o_input_month_item.c_input_size_attr = 4;
+o_input_month_item.c_input_maxlength_attr = 2;
+
+o_input_day_item.c_input_placeholder_attr = 'DD';
+o_input_day_item.c_input_id_attr = 'pmc-age-gate-day';
+o_input_day_item.c_input_error_attr = 'Please enter a valid day';
+o_input_day_item.c_input_size_attr = 4;
+o_input_day_item.c_input_maxlength_attr = 2;
+
 o_input_year_item.c_input_placeholder_attr = 'YYYY';
+o_input_year_item.c_input_id_attr = 'pmc-age-gate-year';
+o_input_year_item.c_input_error_attr = 'Please enter a valid year';
+o_input_year_item.c_input_size_attr = 4;
+o_input_year_item.c_input_maxlength_attr = 4;
 
 o_input_group.o_input_group_items = [
-	o_input_day_item,
 	o_input_month_item,
+	o_input_day_item,
 	o_input_year_item
 ];
 
-c_button.c_button_classes = ' lrv-u-color-white lrv-u-background-color-brand-primary lrv-u-padding-lr-2 lrv-u-padding-tb-075 lrv-u-margin-b-2 lrv-u-text-align-center lrv-u-text-transform-uppercase lrv-u-font-size-32 lrv-u-font-size-18@mobile-max';
+c_button.c_button_text = 'View';
+c_button.c_button_classes = ' lrv-u-color-white lrv-u-background-color-brand-primary lrv-u-padding-lr-2 lrv-u-padding-tb-075 lrv-u-margin-b-2 lrv-u-text-align-center lrv-u-text-transform-uppercase lrv-a-font-primary-m';
 
+c_dek.c_dek_classes = 'lrv-a-font-primary-xs';
 c_dek.c_dek_text = 'Legal text.'
 
 module.exports = {
@@ -44,7 +61,7 @@ module.exports = {
 	form_wrapper_class: '',
 	age_gate_footer_class: 'lrv-u-border-t-1 lrv-u-margin-t-025',
 	c_heading,
-	c_svg,
+	c_svg_header,
 	o_input_group,
 	c_button,
 	c_dek

package/modules/age-gate/age-gate.twig

@@ -1,7 +1,12 @@
 <div class="age-gate // js-AgeGate {{ age_gate_class }}">
 	<div class="age-gate-inner // {{ age_gate_inner_class }}">
 		<div class="age-gate-header // {{ age_gate_header_class }}">
-			{% include "@larva/components/c-svg/c-svg.twig" with c_svg %}
+			{% if c_svg_header %}
+				{% include "@larva/components/c-svg/c-svg.twig" with c_svg_header %}
+			{% endif %}
+			{% if c_lazy_image_header %}
+				{% include "@larva/components/c-lazy-image/c-lazy-image.twig" with c_lazy_image_header %}
+			{% endif %}
 			{% if c_heading %}
 				{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
 			{% endif %}
@@ -21,6 +26,12 @@
 			{% if c_dek %}
 				{% include "@larva/components/c-dek/c-dek.twig" with c_dek %}
 			{% endif %}
+			{% if c_svg_footer %}
+				{% include "@larva/components/c-svg/c-svg.twig" with c_svg_footer %}
+			{% endif %}
+			{% if c_lazy_image_footer %}
+				{% include "@larva/components/c-lazy-image/c-lazy-image.twig" with c_lazy_image_footer %}
+			{% endif %}
 		</div>
 	</div>
 </div>

package/modules/banner/banner.prototype.js

@@ -0,0 +1,10 @@
+const clonedeep = require('lodash.clonedeep');
+
+const c_lazy_image_prototype = require('../../components/c-lazy-image/c-lazy-image.prototype');
+const c_lazy_image = clonedeep(c_lazy_image_prototype);
+
+module.exports = {
+	banner_classes: '',
+	c_lazy_image,
+	screen_reader_text: 'Page Banner',
+};

package/modules/banner/banner.twig

@@ -0,0 +1,10 @@
+<div class="banner // {{ banner_classes }}">
+	<div class="banner__img">
+	{% if c_lazy_image %}
+		{% include "@larva/components/c-lazy-image/c-lazy-image.twig" with c_lazy_image %}
+	{% endif %}
+	</div>
+	{% if screen_reader_text %}
+		<h1 class="lrv-a-screen-reader-only">{{ screen_reader_text }}</h1>
+	{% endif %}
+</div>

package/modules/expandable-search/expandable-search.prototype.js

@@ -0,0 +1,19 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const o_icon_button_search_prototype = require( '../../objects/o-icon-button/o-icon-button.search' );
+const search_form_prototype = require( '../search-form/search-form.prototype' );
+
+const search_form = clonedeep( search_form_prototype );
+search_form.search_form_input_placeholder_attr = 'Search...';
+
+const o_icon_button_search = clonedeep( o_icon_button_search_prototype );
+o_icon_button_search.o_icon_button_classes += ' js-ExpandableSearch-trigger';
+o_icon_button_search.c_icon.c_icon_classes = ' lrv-u-display-block lrv-u-width-24 lrv-u-height-24 lrv-u-color-brand-primary:hover';
+
+module.exports = {
+	expandable_search_outer_classes:  'js-ExpandableSearch lrv-u-flex lrv-u-margin-l-auto lrv-a-glue-parent',
+	expandable_search_classes: 'js-ExpandableSearch-target lrv-a-unstyle-button lrv-u-color-black js-fade js-fade-is-out',
+	expandable_search_inner_classes:'lrv-u-height-auto lrv-a-glue lrv-a-glue--l-0 lrv-a-glue--t-50p lrv-u-flex lrv-u-transform-translateY-n50p',
+	o_icon_button_search: o_icon_button_search,
+	search_form: search_form,
+};

package/modules/expandable-search/expandable-search.twig

@@ -0,0 +1,9 @@
+<div class="expandable-search-outer // {{ expandable_search_outer_classes }}">
+
+	{% include "@larva/objects/o-icon-button/o-icon-button.twig" with o_icon_button_search %}
+	<div class="expandable-search // {{ expandable_search_classes }}" hidden>
+		<div class="expandable_search-inner {{ expandable_search_inner_classes }}" data-header-search-trigger="">
+			{% include "@larva/modules/search-form/search-form.twig" with search_form %}
+		</div>
+	</div>
+</div>

package/modules/footer-button-list/footer-button-list.prototype.js

@@ -36,7 +36,7 @@ customer_service.c_button_url = '#customer-service';
 
 module.exports = {
 	footer_button_list_content_classes: 'o-footer-button-list__content a-font-body-s lrv-u-flex lrv-u-flex-direction-column a-double-underline a-double-underline-color-grey a-double-underline-bottom@mobile-max lrv-u-padding-b-2@mobile-max',
-	footer_button_list_title_classes: 'a-font-accent-medium-l lrv-u-font-weight-bold lrv-u-display-none@mobile-max lrv-u-padding-b-050',
+	footer_button_list_title_classes: 'lrv-a-font-accent-medium-l lrv-u-font-weight-bold lrv-u-display-none@mobile-max lrv-u-padding-b-050',
 	footer_button_list_classes: 'lrv-u-text-transform-uppercase u-letter-spacing-0063',
 	footer_button_list_title_text: '',
 	footer_button_list_buttons: [ get_digital_access, get_magazine, get_gift, customer_service],

package/modules/header/header.article.js

@@ -0,0 +1,39 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const header_prototype = require( './header.prototype' );
+const header = clonedeep( header_prototype );
+
+const header_sticky_prototype = require( '../header-sticky/header-sticky.article' );
+const header_sticky = clonedeep( header_sticky_prototype );
+header.header_sticky = header_sticky;
+
+header.is_home = false;
+header.header_classes = 'lrv-a-glue-parent';
+header.header_inner_classes = 'lrv-u-background-color-white lrv-u-border-b-1 lrv-u-border-t-1 lrv-u-width-100p';
+header.header_sticky_outer_classes = ' lrv-u-width-100p';
+header.header_contents_classes = 'lrv-u-flex lrv-u-justify-content-space-between';
+header.header_outer_classes='lrv-u-border-t-5 lrv-u-padding-t-025 lrv-u-width-100p';
+header.header_logo_classes='lrv-u-flex lrv-u-text-align-center';
+header.header_content_primary_classes = 'lrv-a-wrapper lrv-a-space-children-horizontal lrv-u-align-items-center lrv-u-flex';
+header.header_content_secondary_classes = 'lrv-u-align-items-center lrv-u-border-b-1 lrv-u-border-t-1 lrv-u-flex lrv-u-justify-content-center lrv-u-margin-t-025 lrv-u-padding-tb-075';
+header.header_links_primary_classes = 'lrv-u-align-items-center lrv-u-padding-r-1 lrv-u-border-r-1 lrv-a-space-children--050 lrv-a-space-children-horizontal lrv-u-flex';
+header.header_links_secondary_classes = 'lrv-a-space-children--1 lrv-a-space-children-horizontal lrv-u-flex lrv-u-margin-l-auto';
+header.c_logo.c_logo_classes += 'lrv-u-color-brand-primary lrv-u-color-brand-primary:hover lrv-u-display-inline-flex lrv-u-justify-content-center lrv-u-width-100p lrv-u-width-150';
+header.header_content_menu_classes='lrv-u-margin-l-125 lrv-a-space-children--050 lrv-a-space-children-horizontal lrv-u-flex';
+
+header.o_icon_button_menu.c_icon.c_icon_classes = 'lrv-u-display-block lrv-u-width-30 lrv-u-height-30';
+header.o_icon_button_menu.o_icon_button_classes = 'js-MegaMenu-Trigger lrv-u-align-items-center lrv-u-border-a-0 lrv-u-flex lrv-u-padding-lr-1 lrv-u-background-color-transparent lrv-u-color-brand-primary:hover';
+header.o_icon_button_menu.o_icon_button_screen_reader_text = 'Click to expand the Mega Menu';
+header.o_icon_button_menu.c_span.c_span_text = '';
+
+header.header_menu.o_nav.o_nav_list_item_classes = 'lrv-a-font-body-s lrv-a-space-children--2 lrv-a-space-children-horizontal lrv-a-unstyle-list lrv-u-flex lrv-u-justify-content-center lrv-u-text-transform-uppercase lrv-u-padding-t-050';
+const header_menu_items = header.header_menu.o_nav.o_nav_list_items;
+
+for (let i = 0; i < header_menu_items.length; i++) {
+	header.header_menu.o_nav.o_nav_list_items[i].c_link_classes = 'lrv-u-padding-tb-075 lrv-a-unstyle-link lrv-u-color-brand-primary:hover lrv-a-hover-effect lrv-u-whitespace-nowrap lrv-u-border-b-6 lrv-u-border-color-white lrv-u-border-color-brand-primary:hover lrv-u-line-height-large lrv-u-display-inline-block';
+}
+
+header.expandable_search.expandable_search_inner_classes = 'lrv-u-height-auto lrv-a-glue lrv-a-glue--r-0 lrv-a-glue--t-50p lrv-u-flex lrv-u-transform-translateY-n50p';
+header.expandable_search.expandable_search_classes += ' sticky-expandable';
+
+module.exports = header;

package/modules/header/header.prototype.js

@@ -0,0 +1,90 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const header_sticky_prototype = require( '../header-sticky/header-sticky.prototype' );
+const header_menu_prototype = require( '../header-menu/header-menu.prototype' );
+const expandable_search_prototype = require( '../expandable-search/expandable-search.prototype' );
+const c_link_prototype = require( '../../components/c-link/c-link.prototype' );
+const o_icon_button_prototype = require( '../../objects/o-icon-button/o-icon-button.prototype' );
+const o_icon_button_search_prototype = require( '../../objects/o-icon-button/o-icon-button.search' );
+const o_header_buttons_prototype = require( '../../objects/o-header-buttons/o-header-buttons.prototype' );
+const o_header_buttons_column_prototype = require( '../../objects/o-header-buttons/o-header-buttons.column' );
+
+const header_sticky = clonedeep( header_sticky_prototype );
+
+const expandable_search = clonedeep( expandable_search_prototype );
+
+const header_menu = clonedeep( header_menu_prototype );
+header_menu.o_nav.o_nav_list_classes = 'lrv-a-font-body-s lrv-a-space-children--2 lrv-a-space-children-horizontal lrv-a-unstyle-list lrv-u-flex lrv-u-font-family-body lrv-u-justify-content-center lrv-u-text-transform-uppercase';
+const header_menu_items = header_menu.o_nav.o_nav_list_items;
+for (let i = 0; i < header_menu_items.length; i++) {
+	header_menu.o_nav.o_nav_list_items[i].c_link_classes = ' lrv-u-padding-b-050 lrv-a-unstyle-link lrv-u-color-brand-primary:hover lrv-a-hover-effect lrv-u-whitespace-nowrap lrv-u-border-b-6 lrv-u-border-color-white lrv-u-border-color-brand-primary:hover';
+}
+
+const o_account_menu = clonedeep( require( '../../objects/o-account-menu/o-account-menu.prototype') );
+o_account_menu.o_account_menu_classes += ' lrv-a-hidden';
+
+const c_shop_link = clonedeep( c_link_prototype );
+c_shop_link.c_link_text = 'RS shop';
+c_shop_link.c_link_classes = 'lrv-u-margin-b-050 lrv-a-unstyle-link lrv-u-display-inline lrv-u-color-brand-primary:hover lrv-u-border-b-1 lrv-u-border-color-white lrv-u-border-color-brand-primary:hover lrv-u-font-family-body lrv-u-text-transform-uppercase lrv-a-font-body-xxs';
+
+const c_login_link = clonedeep( c_link_prototype );
+c_login_link.c_link_text = 'Log In';
+c_login_link.c_link_classes = 'subscriber-login-link lrv-u-margin-b-050 lrv-a-unstyle-link lrv-u-display-inline lrv-u-color-brand-primary:hover lrv-u-border-b-1 lrv-u-border-color-white lrv-u-border-color-brand-primary:hover lrv-u-font-family-body lrv-u-text-transform-uppercase lrv-a-font-body-xxs  lrv-a-hidden@mobile-max ';
+
+const c_subscribe_link = clonedeep( c_link_prototype );
+c_subscribe_link.c_link_text = 'Subscribe';
+c_subscribe_link.c_link_classes = 'subscribe-link cx-dynamic-link lrv-u-margin-b-050 lrv-a-unstyle-link lrv-u-display-inline lrv-u-color-brand-primary:hover lrv-u-border-b-1 lrv-u-border-color-white lrv-u-border-color-brand-primary:hover lrv-u-font-family-body lrv-u-text-transform-uppercase lrv-a-font-body-xxs';
+
+const c_got_a_tip = clonedeep( c_link_prototype );
+c_got_a_tip.c_link_text = 'Got A Tip?';
+c_got_a_tip.c_link_classes = 'lrv-u-margin-b-050 lrv-a-unstyle-link lrv-u-display-inline lrv-u-color-brand-primary:hover lrv-u-border-b-1 lrv-u-border-color-white lrv-u-border-color-brand-primary:hover lrv-u-font-family-body lrv-u-text-transform-uppercase lrv-a-font-body-xxs';
+
+const c_logo_prototype = require( '../../components/c-logo/c-logo.prototype' );
+const c_logo =  clonedeep( c_logo_prototype );
+c_logo.c_logo_classes += 'lrv-u-color-brand-primary lrv-u-color-brand-primary:hover lrv-u-display-inline-flex lrv-u-justify-content-center lrv-u-width-100p';
+c_logo.c_logo_is_h1 = true;
+
+const o_icon_button_search = clonedeep( o_icon_button_search_prototype );
+const o_icon_button_menu = clonedeep( o_icon_button_prototype );
+
+o_icon_button_menu.o_icon_button_classes += ' js-MegaMenu-Trigger lrv-u-margin-r-auto lrv-u-color-brand-primary:hover lrv-a-glue-parent';
+o_icon_button_menu.c_icon.c_icon_classes = 'lrv-u-display-block lrv-u-width-30 lrv-u-height-30';
+o_icon_button_menu.c_span.c_span_text = '';
+o_icon_button_menu.o_icon_button_screen_reader_text = 'Click to expand the Mega Menu';
+
+const o_header_buttons = clonedeep( o_header_buttons_prototype );
+
+const o_header_buttons_column = clonedeep( o_header_buttons_column_prototype );
+
+module.exports = {
+	header_classes: 'lrv-a-glue-parent',
+	header_inner_classes: 'lrv-u-width-100p lrv-u-padding-t-1 lrv-u-background-color-white',
+	header_sticky_outer_classes: ' lrv-u-width-100p',
+	header_outer_classes: 'lrv-u-flex lrv-u-justify-content-space-between',
+	header_contents_classes: '',
+	header_logo_classes: 'lrv-u-text-align-center lrv-u-width-40p@tablet',
+	header_content_primary_classes: 'lrv-u-flex lrv-u-justify-content-space-between lrv-u-align-items-center lrv-u-margin-b-050 lrv-u-padding-b-1',
+	header_content_secondary_classes: 'lrv-a-hidden@mobile-max  lrv-u-align-items-center lrv-u-flex lrv-u-justify-content-center',
+	header_links_primary_classes: 'lrv-a-hidden@mobile-max lrv-u-width-30p lrv-a-space-children--050 lrv-a-space-children-vertical',
+	header_links_secondary_classes:'lrv-u-width-30p lrv-u-text-align-right lrv-a-space-children--050 lrv-a-space-children-vertical',
+	header_mobile_button_classes:'lrv-a-hidden@tablet lrv-u-width-22p@mobile-max',
+	header_links_primary_inner_classes:'lrv-u-display-inline-flex lrv-u-flex-direction-column',
+	header_links_secondary_inner_classes:'lrv-u-display-inline-flex lrv-u-flex-direction-column ',
+	header_content_secondary_outer_classes:'lrv-u-border-t-6',
+	header_content_secondary_inner_classes:'lrv-u-border-b-1 lrv-u-border-t-1 lrv-u-margin-t-050 lrv-u-padding-t-050 lrv-u-padding-b-050 lrv-u-border-b-1 lrv-u-border-t-1 lrv-u-margin-t-050 lrv-u-margin-t-025@mobile-max lrv-u-border-b-00@mobile-max',
+	header_content_menu_classes:'lrv-u-margin-l-125 lrv-a-space-children--050 lrv-a-space-children-vertical',
+	c_logo,
+	c_link_left_primary: c_shop_link,
+	c_link_left_secondary: c_got_a_tip,
+	c_link_right_primary: c_subscribe_link,
+	c_link_right_secondary: c_login_link,
+	o_icon_button_menu,
+	o_icon_button_search,
+	header_menu,
+	header_sticky,
+	expandable_search,
+	is_home: true,
+	o_header_buttons,
+	o_header_buttons_column,
+	o_account_menu,
+};

package/modules/header/header.twig

@@ -0,0 +1,74 @@
+{% if is_home %}
+	<header class="header // js-Header {{ header_classes }}">
+		<div class="header-content // js-Header-contents {{ header_contents_classes }}">
+			<div class="header-outer // js-hide-when-sticky {{ header_outer_classes }}">
+				<div class="header-inner //  {{ header_inner_classes }} ">
+					<div class="header-content-primary // lrv-a-wrapper {{ header_content_primary_classes }}">
+						<div class="header-mobile-button // {{ header_mobile_button_classes }} ">
+							{% include "@larva/objects/o-icon-button/o-icon-button.twig" with o_icon_button_menu %}
+						</div>
+						<div class="header-links-primary // {{ header_links_primary_classes }}  ">
+							<div class="header-links-primary-inner // {{ header_links_primary_inner_classes }} ">
+								{% include "@larva/components/c-link/c-link.twig" with c_link_left_primary %}
+								{% include "@larva/components/c-link/c-link.twig" with c_link_left_secondary %}
+							</div>
+						</div>
+						<div class="header-logo // {{ header_logo_classes }} ">
+							{% include "@larva/components/c-logo/c-logo.twig" with c_logo %}
+						</div>
+						<div class="header-links-secondary // {{ header_links_secondary_classes }} ">
+							<div class="header-links-secondary-inner // {{ header_links_secondary_inner_classes }} "> 
+									{% include "@larva/components/c-link/c-link.twig" with c_link_right_primary %}
+									{% include "@larva/components/c-link/c-link.twig" with c_link_right_secondary %}
+									{% include "@larva/objects/o-account-menu/o-account-menu.twig" with o_account_menu %}
+							</div>
+						</div>
+					</div>
+					<div class="header-content-secondary-outer // {{ header_content_secondary_outer_classes }} ">
+						<div class="header-content-secondary-inner // {{ header_content_secondary_inner_classes }} ">
+							<div class="header-content-secondary // lrv-a-wrapper {{ header_content_secondary_classes }} ">
+								{% include "@larva/objects/o-icon-button/o-icon-button.twig" with o_icon_button_menu %}
+								{% include "@larva/modules/header-menu/header-menu.twig" with header_menu %}
+								{% include "@larva/modules/expandable-search/expandable-search.twig" with expandable_search %}
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			{% if header_sticky %}
+				<div class="header-sticky-outer // js-show-when-sticky js-sticky-header-slidedown {{ header_sticky_outer_classes }}">
+					{% include "@larva/modules/header-sticky/header-sticky.twig" with header_sticky %}
+				</div>
+			{% endif %}
+		</div>
+	</header>
+{% else %}
+	<header class="header // js-Header {{ header_classes }}">
+		<div class="header-content // js-Header-contents {{ header_contents_classes }}">
+			<div class="header-outer //  js-hide-when-sticky  {{ header_outer_classes }}">
+				<div class="header-inner // {{ header_inner_classes }} ">
+					<div class="header-content-primary // {{ header_content_primary_classes }}">
+						<div class="header-logo // {{ header_logo_classes }} ">
+							{% include "@larva/components/c-logo/c-logo.twig" with c_logo %}
+						</div>
+						<div class="header-links-primary //  {{ header_links_primary_classes }}  ">
+							{% include "@larva/objects/o-icon-button/o-icon-button.twig" with o_icon_button_menu %}
+							{% include "@larva/modules/expandable-search/expandable-search.twig" with expandable_search %}
+						</div>
+						<div class="header-content-menu // {{ header_content_menu_classes }}  ">
+							{% include "@larva/modules/header-menu/header-menu.twig" with header_menu %}
+						</div>
+						<div class="header-links-secondary // {{ header_links_secondary_classes }} ">
+							{% include "@larva/objects/o-header-buttons/o-header-buttons.twig" with o_header_buttons_column %}
+						</div>
+					</div>
+				</div>
+			</div>
+			{% if header_sticky %}
+				<div class="header-sticky-outer // js-show-when-sticky js-sticky-header-slidedown {{ header_sticky_outer_classes }}">
+					{% include "@larva/modules/header-sticky/header-sticky.twig" with header_sticky %}
+				</div>
+			{% endif %}
+		</div>
+	</header>
+{% endif %}

package/modules/header-menu/header-menu.prototype.js

@@ -0,0 +1,26 @@
+const clonedeep = require('lodash.clonedeep');
+const o_nav = clonedeep(require('../../objects/o-nav/o-nav.prototype'));
+
+o_nav.o_nav_list_items = [];
+const menuLinks = ['News', 'Market', 'Reviews', 'Video'];
+
+for (let i = 0; i < menuLinks.length; i++) {
+	let c_link = clonedeep(require('../../components/c-link/c-link.prototype'));
+
+	if ('icon' === menuLinks[i]) {
+		c_link.c_link_text = '';
+		c_link.c_link_classes = 'lrv-a-unstyle-link lrv-u-color-brand-primary:hover lrv-a-hover-effect lrv-u-text-transform-uppercase';
+	} else {
+		c_link.c_link_text = menuLinks[i];
+		c_link.c_link_classes = 'lrv-a-unstyle-link lrv-u-color-brand-primary:hover lrv-a-hover-effect lrv-u-whitespace-nowrap lrv-u-text-transform-uppercase';
+	}
+
+	o_nav.o_nav_list_items.push(c_link);
+}
+
+o_nav.o_nav_list_classes = 'lrv-a-unstyle-list lrv-u-flex lrv-u-justify-content-center lrv-a-space-children-horizontal lrv-a-space-children--2 lrv-u-font-family-primary';
+
+module.exports = {
+	o_nav: o_nav,
+	header_menu_classes:'',
+};

package/modules/header-menu/header-menu.twig

@@ -0,0 +1,3 @@
+<div class="header-menu // {{ header_menu_classes }}">
+	{% include "@larva/objects/o-nav/o-nav.twig" with o_nav %}
+</div>

package/modules/header-sticky/header-sticky.article.js

@@ -0,0 +1,43 @@
+const clonedeep = require('lodash.clonedeep');
+
+const header_sticky_prototype = require('./header-sticky.prototype');
+const c_icon_prototype = require( '../../components/c-icon/c-icon.prototype' );
+const read_next_prototype = require('../read-next/read-next.prototype');
+const o_social_list_prototype = require('../../objects/o-social-list/o-social-list.prototype');
+
+const read_next = clonedeep(read_next_prototype);
+read_next.read_next_classes += ' lrv-u-margin-l-125 lrv-u-overflow-hidden lrv-u-margin-r-1';
+read_next.c_span.c_span_text = 'Music';
+read_next.c_span.c_span_classes = 'lrv-u-whitespace-nowrap lrv-u-text-transform-uppercase lrv-a-font-body-m lrv-u-font-weight-700';
+read_next.c_title.c_title_link_classes = 'lrv-a-unstyle-link lrv-u-whitespace-nowrap lrv-a-font-body-m';
+
+const o_social_list = clonedeep(o_social_list_prototype);
+const social_icons = ['facebook-rs', 'twitter', 'email'];
+const social_list_icons = [];
+o_social_list.o_social_list_icons = [];
+for (let i = 0; i < social_icons.length; i++) {
+	const c_icon = clonedeep(c_icon_prototype);
+	c_icon.c_icon_name = social_icons[i];
+	c_icon.c_icon_url = '#';
+	c_icon.c_icon_link_classes +=
+		'lrv-u-background-color-white lrv-u-border-radius-50p lrv-u-color-black lrv-u-color-brand-primary:hover lrv-u-display-block';
+	c_icon.c_icon_rel_name = 'noopener noreferrer';
+	social_list_icons.push(c_icon);
+}
+o_social_list.o_social_list_icons = social_list_icons;
+
+const header_sticky = clonedeep(header_sticky_prototype);
+
+header_sticky.o_social_list = o_social_list;
+header_sticky.o_social_list.o_social_list_classes = ' lrv-u-flex lrv-a-space-children--1 lrv-a-space-children-horizontal lrv-u-align-items-center lrv-a-unstyle-list  lrv-u-margin-l-auto lrv-u-margin-r-150';
+
+header_sticky.expandable_search.expandable_search_classes += ' sticky-expandable';
+
+header_sticky.read_next = read_next;
+
+header_sticky.header_sticky_classes = 'lrv-u-border-color-grey-light lrv-u-border-b-1 lrv-u-background-color-white lrv-u-width-100p u-box-shadow-medium article-sticky-header';
+header_sticky.header_sticky_links_classes = 'lrv-u-align-items-center lrv-u-flex lrv-u-justify-content-end lrv-u-width-21p';
+header_sticky.header_sticky_logo_classes += ' lrv-u-order-n1';
+header_sticky.header_sticky_icons_classes = 'lrv-a-glue-parent lrv-u-align-items-center lrv-u-flex lrv-u-padding-r-1 lrv-u-border-r-1';
+
+module.exports = header_sticky;

package/modules/header-sticky/header-sticky.prototype.js

@@ -0,0 +1,39 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const expandable_search_prototype = require( '../expandable-search/expandable-search.prototype' );
+const o_header_buttons_prototype = require( '../../objects/o-header-buttons/o-header-buttons.prototype' );
+const c_logo_prototype = require( '../../components/c-logo/c-logo.prototype' );
+const o_icon_button_prototype = require( '../../objects/o-icon-button/o-icon-button.prototype' );
+
+const expandable_search = clonedeep( expandable_search_prototype );
+
+const c_logo = clonedeep( c_logo_prototype );
+
+const o_icon_button_menu = clonedeep( o_icon_button_prototype );
+o_icon_button_menu.c_icon.c_icon_classes = 'lrv-u-display-block lrv-u-width-30 lrv-u-height-30';
+o_icon_button_menu.o_icon_button_classes = 'js-MegaMenu-Trigger lrv-u-align-items-center lrv-u-border-a-0 lrv-u-flex lrv-u-padding-lr-1 lrv-u-background-color-transparent lrv-u-color-brand-primary:hover';
+o_icon_button_menu.c_span.c_span_text = '';
+o_icon_button_menu.o_icon_button_screen_reader_text = 'Click to expand the Mega Menu';
+
+const o_header_buttons = clonedeep( o_header_buttons_prototype );
+o_header_buttons.login_wrapper_classes = 'lrv-u-border-l-00@mobile-max lrv-u-border-l-1 lrv-u-padding-l-1 lrv-u-padding-tb-025 lrv-a-hidden@mobile-max';
+o_header_buttons.got_tip_wrapper_classes = 'lrv-u-border-l-00@mobile-max lrv-u-border-l-1 lrv-u-padding-l-1 lrv-u-padding-tb-025 lrv-u-flex lrv-u-align-items-center lrv-u-margin-tb-025 lrv-a-hidden@mobile-max';
+
+module.exports = {
+	header_sticky_classes: ' lrv-u-border-color-grey-light lrv-u-border-b-1 lrv-u-background-color-white lrv-u-width-100p',
+	o_icon_button_menu,
+	c_logo,
+	read_next: false,
+	expandable_search,
+	o_social_list: false,
+	o_header_buttons,
+	icon_logo_wrap: false,
+	header_sticky_content_classes:'lrv-u-border-b-1 lrv-u-border-t-1 lrv-u-margin-t-025 lrv-u-padding-t-050 lrv-u-padding-b-050',
+	header_sticky_content_inner_classes: ' lrv-u-flex lrv-u-justify-content-space-between lrv-u-align-items-center',
+	header_sticky_icon_logo_wrap_classes: ' lrv-u-flex lrv-u-justify-content-space-between lrv-u-align-items-center',
+	header_sticky_links_classes: 'lrv-u-align-items-center lrv-u-flex lrv-u-justify-content-end',
+	header_sticky_logo_classes:  'lrv-u-align-items-center lrv-u-flex lrv-u-flex-shrink-0 lrv-u-justify-content-center lrv-u-margin-lr-00@desktop lrv-u-margin-lr-auto',
+	header_sticky_inner_classes: 'lrv-u-align-items-center lrv-u-flex',
+	header_sticky_outer_classes: 'lrv-a-wrapper',
+	header_sticky_icons_classes: 'lrv-a-glue-parent lrv-u-align-items-center lrv-u-flex lrv-u-padding-r-1',
+};

package/modules/header-sticky/header-sticky.twig

@@ -0,0 +1,30 @@
+<div class="header-sticky // {{ header_sticky_classes }}">
+	<div class="header-sticky-content //  {{ header_sticky_content_classes }} ">
+		<div class="lrv-a-wrapper">
+			<div class="header-sticky-content-inner //  {{ header_sticky_content_inner_classes }}">
+				{% if icon_logo_wrap %}
+					<div class="header-sticky-icon-logo-wrap // {{ header_sticky_icon_logo_wrap_classes }} ">
+				{% endif %}
+				<div class="header-sticky-icons // {{ header_sticky_icons_classes }} ">
+					{% include "@larva/objects/o-icon-button/o-icon-button.twig" with o_icon_button_menu %}
+					{% include "@larva/modules/expandable-search/expandable-search.twig" with expandable_search %}
+				</div>
+				<div class="header-sticky-logo // {{ header_sticky_logo_classes }} ">
+					{% include "@larva/components/c-logo/c-logo.twig" with c_logo %}
+				</div>
+				{% if icon_logo_wrap %}
+					</div>
+				{% endif %}
+				{% if read_next %}
+					{% include "@larva/modules/read-next/read-next.twig" with read_next %}
+				{% endif %}
+				{% if o_social_list %}
+					{% include "@larva/objects/o-social-list/o-social-list.twig" with o_social_list %}
+				{% endif %}
+				<div class="header-sticky-links // {{ header_sticky_links_classes }} ">
+					{% include "@larva/objects/o-header-buttons/o-header-buttons.twig" with o_header_buttons %}
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

package/modules/mega-menu/mega-menu.prototype.js

@@ -0,0 +1,16 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const mega_menu_footer_prototype = require( '../mega-menu-footer/mega-menu-footer.prototype.js' );
+const mega_menu_footer = clonedeep( mega_menu_footer_prototype );
+
+const mega_menu_content_prototype = require( '../mega-menu-content/mega-menu-content.prototype.js' );
+const mega_menu_content = clonedeep( mega_menu_content_prototype );
+
+module.exports = {
+	mega_menu_footer,
+	mega_menu_content,
+	mega_menu_classes: '',
+	mega_menu_outer_classes: 'lrv-a-wrapper',
+	mega_menu_inner_classes: 'lrv-u-background-color-white lrv-u-flex lrv-u-flex-direction-column lrv-u-border-b-2 lrv-u-border-r-2 lrv-u-border-l-2',
+	mega_menu_content_outer_classes: 'lrv-u-background-color-white lrv-u-padding-a-150 lrv-u-width-100p',
+};

package/modules/mega-menu/mega-menu.twig

@@ -0,0 +1,10 @@
+<nav class="mega-menu // js-MegaMenu {{ mega_menu_classes }} ">
+	<div class="mega-menu-outer // {{ mega_menu_outer_classes }} ">
+		<div class="mega-menu-inner // {{ mega_menu_inner_classes }} ">
+			<div class="mega-menu-content-outer // {{ mega_menu_content_outer_classes }} ">
+				{% include "@larva/modules/mega-menu-content/mega-menu-content.twig" with mega_menu_content %}
+			</div>
+			{% include "@larva/modules/mega-menu-footer/mega-menu-footer.twig" with mega_menu_footer %}
+		</div>
+	</div>
+</nav>

package/modules/mega-menu-content/mega-menu-content.prototype.js

@@ -0,0 +1,10 @@
+const clonedeep = require( 'lodash.clonedeep' );
+const mega_menu_item = clonedeep( require( '../mega-menu-item/mega-menu-item.prototype' ) );
+
+module.exports = {
+	mega_menu_content_items: [
+		mega_menu_item,
+		mega_menu_item,
+	],
+	mega_menu_content_classes: 'lrv-u-flex lrv-u-flex-wrap-wrap lrv-a-unstyle-list lrv-u-background-color-white lrv-a-space-children--050 lrv-a-space-children-horizontal '
+};

package/modules/mega-menu-content/mega-menu-content.twig

@@ -0,0 +1,5 @@
+<ul class="mega-menu-content // mega-menu__parent-list {{ mega_menu_content_classes }} ">
+	{% for item in mega_menu_content_items %}
+		{% include "@larva/modules/mega-menu-item/mega-menu-item.twig" with item %}
+	{% endfor %}
+</ul>

package/modules/mega-menu-footer/mega-menu-footer.prototype.js

@@ -0,0 +1,41 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const mega_menu_subscribe = clonedeep( require( '../mega-menu-footer-subscribe/mega-menu-footer-subscribe.prototype' ) );
+const social_heading = clonedeep( require( '../../modules/heading/heading.prototype' ) );
+const newsletter_heading = clonedeep( require( '../../modules/heading/heading.prototype' ) );
+const o_social_list = clonedeep( require( '../../objects/o-social-list/o-social-list.prototype' ) );
+
+social_heading.heading_level_text = '3';
+social_heading.heading_classes = 'lrv-a-font-body-xs lrv-u-margin-b-050 lrv-u-margin-t-025 lrv-u-font-weight-normal lrv-u-text-transform-uppercase lrv-u-text-align-center lrv-u-display-inline-block@mobile-max lrv-u-vertical-align-middle\@mobile-max';
+social_heading.heading_markup = 'Follow Us';
+
+newsletter_heading.heading_level_text = '3';
+newsletter_heading.heading_classes = 'email-form-heading lrv-u-background-color-white lrv-a-font-body-xs lrv-u-width-70p lrv-u-margin-b-125 lrv-u-text-align-center lrv-u-font-weight-normal lrv-u-text-transform-uppercase lrv-u-padding-lr-075 lrv-u-border-r-1 lrv-u-border-l-1 lrv-u-border-r-00@mobile-max lrv-u-border-l-00@mobile-max';
+newsletter_heading.heading_markup = 'Alerts & Newsletters';
+
+const o_email_capture_form_prototype = require( '../../objects/o-email-capture-form/o-email-capture-form.prototype' );
+const o_email_capture_form = clonedeep( o_email_capture_form_prototype );
+
+o_email_capture_form.c_email_field.c_email_field_label_text = 'Email Address';
+o_email_capture_form.c_email_field.c_email_field_input_placeholder_attr = 'ENTER E-MAIL';
+o_email_capture_form.c_email_field.c_email_field_input_classes = 'lrv-u-width-100p';
+o_email_capture_form.c_email_field.c_email_field_classes = 'lrv-u-border-b-1 lrv-u-border-r-1 lrv-a-font-body-xxs lrv-u-margin-b-125 lrv-u-margin-b-00@mobile-max lrv-u-text-align-left lrv-u-width-75p@mobile-max';
+o_email_capture_form.c_email_field.c_email_field_label_classes = 'lrv-a-hidden';
+o_email_capture_form.o_email_capture_form_inner_classes = 'lrv-u-text-align-right lrv-u-align-items-center';
+o_email_capture_form.c_button.c_button_classes = 'lrv-a-font-body-xs lrv-a-icon-after lrv-u-text-transform-uppercase lrv-a-unstyle-button lrv-u-cursor-pointer lrv-u-flex lrv-u-justify-content-end lrv-u-width-100p@tablet lrv-a-glue-parent@tablet lrv-u-width-75p@mobile-max';
+o_email_capture_form.c_button.c_button_inner_classes = 'lrv-u-background-color-white lrv-u-padding-l-050';
+o_email_capture_form.c_button.c_button_text = 'Sign Up';
+
+module.exports = {
+	o_email_capture_form,
+	o_social_list,
+	social_heading,
+	mega_menu_subscribe,
+	newsletter_heading,
+	mega_menu_footer_classes: 'lrv-u-border-t-2 lrv-u-background-color-white',
+	mega_menu_footer_inner_classes: 'lrv-u-flex lrv-u-flex-direction-column@mobile-max',
+	mega_menu_footer_subscribe_classes: 'lrv-u-flex lrv-u-flex-direction-column@desktop-max lrv-u-align-items-center lrv-u-width-30p lrv-a-hidden@mobile-max lrv-u-border-r-6 lrv-u-margin-r-025',
+	mega_menu_footer_social_classes: 'lrv-u-flex lrv-u-flex-direction-column lrv-u-align-items-center lrv-u-padding-tb-050 lrv-u-width-20p lrv-u-width-100p@mobile-max lrv-u-border-r-1 lrv-u-border-l-1 lrv-u-border-r-00@mobile-max lrv-u-border-l-00@mobile-max lrv-u-padding-lr-050 lrv-u-display-block@mobile-max lrv-u-text-align-center@mobile-max lrv-u-border-b-2@mobile-max',
+	mega_menu_social_list_classes:' lrv-u-display-inline-block@mobile-max lrv-u-vertical-align-middle@mobile-max lrv-u-flex@tablet lrv-u-justify-content-center',
+	mega_menu_footer_form_classes: 'lrv-u-flex lrv-u-flex-direction-column lrv-u-align-items-center lrv-u-padding-tb-1 lrv-u-width-50p lrv-u-width-100p@mobile-max lrv-u-flex-direction-column lrv-u-padding-lr-125',
+}

package/modules/mega-menu-footer/mega-menu-footer.twig

@@ -0,0 +1,19 @@
+<footer class="mega-menu__footer // {{ mega_menu_footer_classes }} ">
+	<div class="mega-menu__footer-inner // {{ mega_menu_footer_inner_classes }} ">
+		<section class="mega-menu__footer-subscribe // {{ mega_menu_footer_subscribe_classes }} ">
+			{% include "@larva/modules/mega-menu-footer-subscribe/mega-menu-footer-subscribe.twig" with mega_menu_subscribe %}
+		</section>
+		<section class="mega-menu__footer-social // {{ mega_menu_footer_social_classes }} ">
+			{% include "@larva/modules/heading/heading.twig" with social_heading %}
+			<div class="mega-menu__social-list // {{ mega_menu_social_list_classes }}">
+				{% include "@larva/objects/o-social-list/o-social-list.twig" with o_social_list %}
+			</div>
+		</section>
+		<section class="mega-menu__footer-form // {{ mega_menu_footer_form_classes }} ">
+			{% include "@larva/modules/heading/heading.twig" with newsletter_heading %}
+			<div class="lrv-u-flex-grow-1 lrv-u-width-100p">
+				{% include "@larva/objects/o-email-capture-form/o-email-capture-form.twig" with o_email_capture_form %}
+			</div>
+		</section>
+	</div>
+</footer>

package/modules/mega-menu-footer-subscribe/mega-menu-footer-subscribe.prototype.js

@@ -0,0 +1,20 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_lazy_image_prototype = require( '../../components/c-lazy-image/c-lazy-image.prototype.js' );
+const c_lazy_image = clonedeep( c_lazy_image_prototype );
+
+const c_icon_prototype = require( '../../components/c-icon/c-icon.prototype.js' );
+const c_icon = clonedeep( c_icon_prototype );
+
+c_icon.c_icon_classes = 'lrv-a-glue lrv-a-glue--l-0 lrv-a-glue--t-50p lrv-u-transform-translateY-n50p lrv-u-width-50';
+
+c_lazy_image.c_lazy_image_src_url = 'https://cdn.shopify.com/s/files/1/0238/6647/products/2019_37_540x.jpg';
+c_lazy_image.c_lazy_image_placeholder_url = 'https://cdn.shopify.com/s/files/1/0238/6647/products/2019_37_540x.jpg';
+c_lazy_image.c_lazy_image_classes = 'lrv-u-padding-l-3';
+c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-2x3';
+
+module.exports = {
+	footer_subscribe_classes: 'lrv-a-glue-parent lrv-u-width-100p',
+	c_lazy_image,
+	c_icon
+};

package/modules/mega-menu-footer-subscribe/mega-menu-footer-subscribe.twig

@@ -0,0 +1,4 @@
+<div class="mega-menu-footer-subscribe // {{ footer_subscribe_classes }}">
+	{% include "@larva/components/c-icon/c-icon.twig" with c_icon %}
+	{% include "@larva/components/c-lazy-image/c-lazy-image.twig" with c_lazy_image %}
+</div>

package/modules/mega-menu-item/mega-menu-item.prototype.js

@@ -0,0 +1,23 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_link = clonedeep( require( '../../components/c-link/c-link.prototype' ) );
+const c_link__parent = clonedeep( c_link );
+const c_link__child = clonedeep( c_link );
+
+c_link__parent.c_link_text = 'Parent item';
+c_link__parent.c_link_classes = 'lrv-a-unstyle-link lrv-u-color-brand-primary-dark:hover lrv-u-font-weight-bold lrv-a-font-body-xs lrv-u-text-transform-uppercase';
+
+c_link__child.c_link_text = 'Child item';
+c_link__child.c_link_classes = 'lrv-a-unstyle-link lrv-u-color-brand-primary-dark:hover lrv-u-padding-tb-025 lrv-u-display-block lrv-a-font-body-xs';
+
+module.exports = {
+	c_link: c_link__parent,
+	mega_menu_item_children: [
+		c_link__child,
+		c_link__child,
+		c_link__child
+	],
+	mega_menu_item_classes:'lrv-a-unstyle-list',
+	mega_menu_item_link_classes:'lrv-u-flex lrv-u-color-black   lrv-u-display-inline-block lrv-u-width-100p',
+	mega_menu_child_list_classes:'lrv-a-unstyle-list lrv-u-padding-t-1 lrv-u-margin-b-125'
+};

package/modules/mega-menu-item/mega-menu-item.twig

@@ -0,0 +1,13 @@
+<li class="mega-menu-item // mega-menu__parent-list-item {{ mega_menu_item_classes }} ">
+	<div class="mega-menu__item-link // {{ mega_menu_item_link_classes }} ">
+		{% include "@larva/components/c-link/c-link.twig" with c_link %}
+	</div>
+
+	<ul class="mega-menu__child-list // {{ mega_menu_child_list_classes }} ">
+		{% for item in mega_menu_item_children %}
+			<li class="mega-menu__child-list-item ">
+				{% include "@larva/components/c-link/c-link.twig" with item %}
+			</li>
+		{% endfor %}
+	</ul>
+</li>

package/modules/read-next/read-next.prototype.js

@@ -0,0 +1,20 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_span_prototype = require( '../../components/c-span/c-span.prototype' );
+const c_span = clonedeep(  c_span_prototype );
+
+c_span.c_span_text = 'Read Next: ';
+c_span.c_span_classes += ' lrv-u-text-transform-uppercase  lrv-u-font-weight-bold';
+
+const c_title_prototype = require( '../../components/c-title/c-title.prototype' );
+const c_title = clonedeep( c_title_prototype );
+
+c_title.c_title_classes = 'lrv-u-padding-l-1 lrv-u-max-width-500 lrv-a-truncate-ellipsis lrv-u-font-weight-normal';
+c_title.c_title_text = 'Here is some really long title text, it should be truncated with lrv-a-truncate-ellispis, we hope!!!!!! Wow it\'s so long.';
+c_title.c_title_link_classes = 'lrv-a-unstyle-link';
+
+module.exports = {
+	read_next_classes: ' lrv-a-hidden@desktop-max lrv-u-flex lrv-u-align-items-center lrv-u-flex-1 lrv-u-font-family-body lrv-u-font-size-16',
+	c_span: c_span,
+	c_title: c_title,
+};

package/modules/read-next/read-next.twig

@@ -0,0 +1,4 @@
+<aside class="read-next // {{ read_next_classes }}">
+	{% include "@larva/components/c-span/c-span.twig" with c_span %}
+	{% include "@larva/components/c-title/c-title.twig" with c_title %}
+</aside>

package/modules/search-form/search-form.prototype.js

@@ -0,0 +1,8 @@
+module.exports = {
+	search_form_classes: '',
+	search_form_action_url: '#',
+	search_form_is_swiftype: false,
+	search_form_input_classes: '',
+	search_form_input_placeholder_attr: 'Search',
+	search_form_submit_classes: '',
+};

package/modules/search-form/search-form.twig

@@ -0,0 +1,11 @@
+{% if search_form_is_swiftype %}
+	<div data-st-search-form="small_search_form"></div>
+{% else %}
+	<form class="search-form {{ search_form_classes }}" action="{{ search_form_action_url }}" role="search" method="get">
+		<label>
+			<span class="lrv-a-screen-reader-only">Search for:</span>
+			<input class="{{ search_form_input_classes }}" type="search" placeholder="{{ search_form_input_placeholder_attr }}" value="" name="s">
+		</label>
+		<input class="{{ search_form_submit_classes }}" type="submit" value="Search">
+	</form>
+{% endif %}

package/modules/story-grid/story-grid.twig

@@ -1,4 +1,9 @@
 <div class="story-grid lrv-u-padding-tb-1 lrv-u-padding-tb-2@desktop // {{ story_grid_classes }}">
+
+	{% if o_header %}
+		{% include "@larva/objects/o-header/o-header.twig" with o_header %}
+	{% endif %}
+
 	<ul class="{{ story_grid_grid_classes }} // lrv-a-unstyle-list lrv-u-margin-b-050">
 		{% for item in story_grid_story_cards %}
 			<li class="{{ story_grid_grid_item_classes }}">

package/objects/o-account-menu/o-account-menu.prototype.js

@@ -0,0 +1,35 @@
+const clonedeep = require('lodash.clonedeep');
+
+const c_link_prototype = require('../../components/c-link/c-link.prototype');
+const c_span_prototype = require('../../components/c-span/c-span.prototype');
+
+const c_welcome_span = clonedeep(c_span_prototype);
+c_welcome_span.c_span_classes = 'subscriber-name lrv-a-font-body lrv-u-color-black lrv-u-font-size-12 lrv-u-text-transform-uppercase';
+c_welcome_span.c_span_text = 'Welcome Name';
+c_welcome_span.c_span_link_classes = 'lrv-u-color-black lrv-u-color-brand-primary:hover';
+c_welcome_span.c_span_url = '#';
+
+const c_account_link = clonedeep(c_link_prototype);
+c_account_link.c_link_text = 'Account';
+c_account_link.c_link_classes = 'subscriber-account-link lrv-u-font-family-body lrv-u-font-size-12 lrv-u-font-size-8@mobile-max lrv-a-icon-after lrv-a-icon-arrow-down lrv-a-unstyle-link lrv-u-border-b-1 lrv-u-border-color-brand-primary:hover lrv-u-border-color-white lrv-u-color-brand-primary:hover lrv-u-text-transform-uppercase';
+
+const c_manage_account = clonedeep(c_link_prototype);
+c_manage_account.c_link_text = 'Manage Account';
+c_manage_account.c_link_classes = 'subscriber-self-care-link lrv-u-text-transform-uppercase lrv-a-font-secondary lrv-u-color-black lrv-u-font-size-12 lrv-u-width-100 lrv-u-text-align-center lrv-u-color-brand-primary:hover';
+
+const c_log_out = clonedeep(c_link_prototype);
+c_log_out.c_link_text = 'Sign Out';
+c_log_out.c_link_classes = 'subscriber-logout-link lrv-a-font-secondary lrv-u-color-black lrv-u-color-brand-primary:hover lrv-u-font-size-12 lrv-u-text-transform-uppercase';
+
+module.exports = {
+	o_account_menu_classes: 'js-Tooltip-parent lrv-a-glue-parent lrv-u-flex',
+	o_account_content_classes: 'js-Tooltip lrv-a-glue lrv-a-glue--t-100p lrv-u-box-shadow-medium',
+	o_account_content_inner_classes: 'lrv-a-glue-parent lrv-a-icon-after-arrow-top-left lrv-u-background-color-white lrv-u-border-a-2 lrv-u-flex lrv-u-flex-direction-column lrv-u-text-align-left lrv-u-flex-wrap-wrap lrv-u-margin-t-1 lrv-u-padding-tb-050 lrv-u-padding-lr-150 lrv-u-width-200',
+	o_account_welcome_span_classes: 'lrv-u-border-b-1 lrv-u-padding-tb-050',
+	o_account_manage_account_classes: 'lrv-u-border-b-1 lrv-u-padding-tb-050',
+	o_account_logout_classes: 'lrv-u-padding-tb-050',
+	c_welcome_span,
+	c_account_link,
+	c_manage_account,
+	c_log_out,
+};

package/objects/o-account-menu/o-account-menu.twig

@@ -0,0 +1,25 @@
+<div class="o-account-menu //  {{ o_account_menu_classes }}">
+	{% include "@larva/components/c-link/c-link.twig" with c_account_link %}
+	<div class="o-account-content // {{ o_account_content_classes }}">
+		<div class="o-account-content-inner // {{ o_account_content_inner_classes }}">
+
+			{% if c_welcome_span %}
+				<div class="o-account-welcome-span-link // {{ o_account_welcome_span_classes }} ">
+					{% include "@larva/components/c-span/c-span.twig" with c_welcome_span %}
+				</div>
+			{% endif %}
+
+			{% if c_manage_account %}
+				<div class="o-account-manage-account-link // {{ o_account_manage_account_classes }} ">
+					{% include "@larva/components/c-link/c-link.twig" with c_manage_account %}
+				</div>
+			{% endif %}
+
+			{% if c_log_out %}
+				<div class="o-account-logout-link // {{ o_account_logout_classes }} ">
+					{% include "@larva/components/c-link/c-link.twig" with c_log_out %}
+				</div>
+			{% endif %}
+		</div>
+	</div>
+</div>

package/objects/o-header/o-header.twig

@@ -11,6 +11,10 @@
 		{% include "@larva/components/c-button/c-button.twig" with c_button %}
 	{% endif %}
 
+	{% if c_svg %}
+		{% include "@larva/components/c-svg/c-svg.twig" with c_svg %}
+	{% endif %}
+
 	{% if o_sponsored_by %}
 		{% include "@larva/objects/o-sponsored-by/o-sponsored-by.twig" with o_sponsored_by %}
 	{% endif %}

package/objects/o-header-buttons/o-header-buttons.column.js

@@ -0,0 +1,10 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const header_buttons_prototype = require( './o-header-buttons.prototype' );
+const header_buttons = clonedeep( header_buttons_prototype );
+
+header_buttons.button_wrap = true;
+header_buttons.c_subscribe_link.c_link_classes = 'lrv-a-unstyle-link lrv-u-text-transform-uppercase lrv-u-font-family-body lrv-u-font-size-12 lrv-u-font-size-8@mobile-max  lrv-u-color-brand-primary:hover lrv-u-border-b-1 lrv-u-border-color-white lrv-u-border-color-brand-primary:hover lrv-u-border-b-1 lrv-u-border-color-currentColor lrv-u-margin-b-025';
+header_buttons.c_got_a_tip.c_link_classes  = 'lrv-a-unstyle-link lrv-u-text-transform-uppercase lrv-u-font-family-body lrv-u-font-size-12 lrv-u-font-size-8@mobile-max  lrv-u-color-brand-primary:hover lrv-u-border-b-1 lrv-u-border-color-white lrv-u-border-color-brand-primary:hover lrv-u-margin-tb-025';
+header_buttons.o_header_button_classes = 'lrv-u-align-items-stretch lrv-a-space-children-horizontal lrv-a-space-children--1';
+module.exports = header_buttons;

package/objects/o-header-buttons/o-header-buttons.prototype.js

@@ -0,0 +1,41 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_link_prototype = require( '../../components/c-link/c-link.prototype' );
+const o_account_menu_prototype = require( '../../objects/o-account-menu/o-account-menu.prototype');
+
+const c_login_link = clonedeep( c_link_prototype );
+c_login_link.c_link_text = 'Log In';
+c_login_link.c_link_classes = ' lrv-a-unstyle-link lrv-u-text-transform-uppercase lrv-u-font-family-body lrv-u-font-size-12 lrv-u-font-size-8@mobile-max  lrv-u-color-brand-primary:hover lrv-u-border-b-1 lrv-u-border-color-white lrv-u-border-color-brand-primary:hover';
+
+const c_subscribe_link = clonedeep( c_link_prototype );
+c_subscribe_link.c_link_text = 'Subscribe';
+c_subscribe_link.c_link_classes = 'lrv-a-unstyle-button lrv-a-unstyle-link lrv-u-text-transform-uppercase lrv-u-font-family-body lrv-u-font-size-12 lrv-u-font-size-8@mobile-max  lrv-u-color-brand-primary:hover lrv-u-border-b-1 lrv-u-border-color-white lrv-u-border-color-brand-primary:hover';
+
+const c_account_link = clonedeep( c_link_prototype );
+c_account_link.c_link_text = 'Account';
+c_account_link.c_link_classes = 'lrv-u-text-transform-uppercase lrv-u-font-family-body lrv-u-font-size-12 lrv-u-font-size-8@mobile-max  lrv-u-color-brand-primary:hover lrv-u-border-color-white lrv-u-border-color-brand-primary:hover';
+
+const c_got_a_tip = clonedeep( c_link_prototype );
+c_got_a_tip.c_link_text = 'Got A Tip?';
+c_got_a_tip.c_link_classes = 'lrv-a-unstyle-link lrv-u-text-transform-uppercase lrv-u-font-family-body lrv-u-font-size-12 lrv-u-font-size-8@mobile-max  lrv-u-color-brand-primary:hover lrv-u-border-b-1 lrv-u-border-color-white lrv-u-border-color-brand-primary:hover';
+
+const o_account_menu = clonedeep( o_account_menu_prototype );
+
+o_account_menu.c_account_link.c_link_classes  = ' lrv-a-unstyle-link lrv-u-text-transform-uppercase lrv-u-font-family-body lrv-u-font-size-12 lrv-u-font-size-8@mobile-max  lrv-u-color-brand-primary:hover lrv-u-border-b-1 lrv-u-border-color-white lrv-u-border-color-brand-primary:hover lrv-u-margin-tb-025';
+
+module.exports = {
+	c_login_link,
+	c_subscribe_link,
+	o_account_menu,
+	c_got_a_tip,
+	c_account_link,
+	button_wrap: false,
+	show_flyout: true,
+	o_header_button_classes: 'lrv-a-space-children-horizontal lrv-a-space-children--1',
+	got_tip_wrapper_classes: 'lrv-u-border-l-00@mobile-max lrv-u-border-l-1 lrv-u-padding-l-1 lrv-u-padding-tb-025 lrv-u-flex lrv-u-align-items-center lrv-u-margin-tb-025',
+	account_menu_classes: 'lrv-u-flex lrv-u-align-items-center lrv-u-border-l-00@mobile-max lrv-u-border-l-1 lrv-u-padding-l-1 lrv-u-padding-tb-025 lrv-u-margin-tb-025',
+	hide_flyout_classes: ' ',
+	subscribe_wrapper_classes: 'subscribe-link cx-dynamic-link lrv-u-border-l-00@mobile-max lrv-u-border-l-1 lrv-u-padding-l-1 lrv-u-padding-tb-025 lrv-u-margin-tb-025',
+	login_wrapper_classes: 'subscriber-login-link lrv-u-border-l-00@mobile-max lrv-u-border-l-1 lrv-u-padding-l-1 lrv-u-padding-tb-025  lrv-u-margin-tb-025',
+	button_wrap_classes: 'lrv-u-flex lrv-u-flex-direction-column lrv-u-align-items-center lrv-u-border-l-00@mobile-max lrv-u-border-l-1 lrv-u-padding-l-1 lrv-u-margin-tb-025',
+};

package/objects/o-header-buttons/o-header-buttons.twig

@@ -0,0 +1,42 @@
+<div class="lrv-u-flex {{o_header_button_classes}}">
+	<div class="item-wrap // {{ got_tip_wrapper_classes }}">
+		{% include "@larva/components/c-link/c-link.twig" with c_got_a_tip %}
+	</div>
+
+		{% if show_flyout %}
+
+			<div class="item-wrap // {{ account_menu_classes }} ">
+				{% include "@larva/objects/o-account-menu/o-account-menu.twig" with o_account_menu %}
+			</div>
+
+		{% else %}
+
+			<div class="item-wrap // {{ account_menu_classes }} {{ hide_flyout_classes}}">
+				{% include "@larva/components/c-link/c-link.twig" with c_account_link %}
+			</div>
+
+		{% endif %}
+
+		{% if button_wrap %}
+
+			<div class="items-wrap // {{ button_wrap_classes }}">
+				{% if c_subscribe_link %}
+					{% include "@larva/components/c-link/c-link.twig" with c_subscribe_link %}
+				{% endif %}
+
+				{% include "@larva/components/c-link/c-link.twig" with c_login_link %}
+			</div>
+
+		{% else %}
+
+			<div class="item-wrap // {{ subscribe_wrapper_classes }}">
+				{% if c_subscribe_link %}
+					{% include "@larva/components/c-link/c-link.twig" with c_subscribe_link %}
+				{% endif %}
+			</div>
+			<div class="item-wrap // {{ login_wrapper_classes }} ">
+				{% include "@larva/components/c-link/c-link.twig" with c_login_link %}
+			</div>
+
+		{% endif %}
+</div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@penskemediacorp/larva-patterns",
-  "version": "0.7.2",
+  "version": "0.7.5",
   "description": "Larva markup patterns.",
   "author": "laras126 <laras126@gmail.com>",
   "homepage": "https://github.com/Penske-Media-Corp/pmc-larva/tree/master/packages/patterns#readme",
@@ -20,10 +20,10 @@
     "url": "https://github.com/Penske-Media-Corp/pmc-larva/issues"
   },
   "dependencies": {
-    "@penskemediacorp/larva-css": "^0.7.2",
-    "@penskemediacorp/larva-js": "^0.7.0",
+    "@penskemediacorp/larva-css": "^0.7.5",
+    "@penskemediacorp/larva-js": "^0.7.5",
     "@penskemediacorp/larva-svg": "^0.7.0",
     "lodash.clonedeep": "^4.5.0"
   },
-  "gitHead": "ff13a0e08348efa07604892192c7eeec9fbb1548"
+  "gitHead": "d584b033ef39d9be9279eab5b499528b5ab130e7"
 }