@penskemediacorp/larva-patterns 1.9.0-alpha.0 → 1.9.0

package/modules/footer-button-list/footer-button-list.twig

@@ -0,0 +1,13 @@
+<div class="footer-button-list {{ footer_button_list_classes }}">
+	{% if footer_button_list_title_text %}
+		<h4 class="footer-button-list__title {{ footer_button_list_title_classes }}">
+			{{ footer_button_list_title_text }}
+		</h4>
+	{% endif %}
+
+	<section class="footer-button-list__content lrv-u-flex lrv-u-flex-direction-column {{ footer_button_list_content_classes }}">
+		{% for item in footer_button_list_buttons %}
+			{% include "@larva/components/c-button/c-button.twig" with item %}
+		{% endfor %}
+	</section>
+</div>

package/modules/footer-magazine-image/footer-magazine-image.prototype.js

@@ -0,0 +1,15 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_lazy_magazine_image_prototype = require( '../../components/c-lazy-image/c-lazy-image.prototype' );
+const c_lazy_magazine_image = clonedeep( c_lazy_magazine_image_prototype );
+
+c_lazy_magazine_image.c_lazy_image_classes = 'lrv-u-flex-shrink-0 lrv-u-margin-r-2 lrv-u-width-300 a-hidden@desktop-xl-max';
+c_lazy_magazine_image.c_lazy_image_src_url = 'https://cdn.shopify.com/s/files/1/0238/6647/products/2019_37_540x.jpg';
+c_lazy_magazine_image.c_lazy_image_placeholder_url = 'https://cdn.shopify.com/s/files/1/0238/6647/products/2019_37_540x.jpg';
+c_lazy_magazine_image.c_lazy_image_crop_class = '';
+c_lazy_magazine_image.c_lazy_image_link_url = '/subscribe-us/';
+c_lazy_magazine_image.c_lazy_image_srcset_attr = 'https://cdn.shopify.com/s/files/1/0238/6647/products/2019_37_540x.jpg 240w,https://cdn.shopify.com/s/files/1/0238/6647/products/2019_37_540x.jpg 320w,https://cdn.shopify.com/s/files/1/0238/6647/products/2019_37_540x.jpg 500w,https://cdn.shopify.com/s/files/1/0238/6647/products/2019_37_540x.jpg 640w,https://cdn.shopify.com/s/files/1/0238/6647/products/2019_37_540x.jpg 1024w';
+
+module.exports = {
+	c_lazy_magazine_image,
+};

package/modules/footer-magazine-image/footer-magazine-image.twig

@@ -0,0 +1,3 @@
+<div class="footer-image //">
+	{% include "@larva/components/c-lazy-image/c-lazy-image.twig" with c_lazy_magazine_image %}
+</div>

package/modules/footer-menus/README.md

@@ -0,0 +1,3 @@
+# footer-menus
+
+This module is included in `footer` and does not have its own JSON configuration file. Refer to the `footer` readme for details on implementing the footer in a theme.

package/modules/footer-menus/footer-menus.prototype.js

@@ -1,18 +1,18 @@
-const path = require( 'path' );
-const clone = require( '@penskemediacorp/larva' ).clone;// This should be in this repo, probably
-const o_nav = clone( path.resolve( __dirname, '../../objects/o-nav/o-nav.prototype' ) );
+const clonedeep = require( 'lodash.clonedeep' );
+
+const o_nav = clonedeep( require( '../../objects/o-nav/o-nav.prototype' ) );
 
 o_nav.o_nav_title_text = 'Footer Menu';
-o_nav.o_nav_title_id_attr = 'pmc-footer';
-o_nav.o_nav_classes = 'pmc-js-MobileHeightToggle pmc-u-color-white pmc-u-text-align-center@tablet pmc-u-border-a-1@mobile-max pmc-u-border-color-white';
-o_nav.o_nav_title_classes = 'pmc-js-MobileHeightToggle-trigger pmc-u-padding-lr-1 pmc-u-margin-tb-00 pmc-u-padding-t-1 pmc-u-padding-t-050@tablet pmc-u-padding-b-050 pmc-u-width-100p@mobile-max a-icon-after a-icon-arrow-down a-icon-after:margin-l-auto a-icon-after-remove@tablet a-icon-invert pmc-u-cursor-pointer pmc-u-font-family-primary pmc-u-font-weight-bold pmc-u-font-size-20';
-o_nav.o_nav_list_classes += ' pmc-js-MobileHeightToggle-target pmc-u-padding-b-050';
-o_nav.o_nav_list_item_classes = 'pmc-u-padding-lr-1 pmc-u-padding-tb-050 pmc-u-font-size-18@mobile-max pmc-u-font-size-12 pmc-u-color-grey-light pmc-u-color-white:hover';
+o_nav.o_nav_classes = 'lrv-js-MobileHeightToggle lrv-u-text-align-center@tablet lrv-u-border-a-1@mobile-max lrv-u-border-color-white';
+o_nav.o_nav_title_classes = 'lrv-js-MobileHeightToggle-trigger lrv-u-padding-lr-1 lrv-u-margin-tb-00 lrv-u-padding-t-1 lrv-u-padding-t-050@tablet lrv-u-padding-b-050 lrv-u-width-100p@mobile-max lrv-a-icon-after lrv-a-icon-arrow-down lrv-a-icon-after:margin-l-auto lrv-a-icon-after-remove@tablet lrv-a-icon-invert lrv-u-cursor-pointer lrv-u-font-family-primary lrv-u-font-weight-bold lrv-u-font-size-20';
+o_nav.o_nav_list_classes += ' lrv-js-MobileHeightToggle-target lrv-u-padding-b-050';
+o_nav.o_nav_list_item_classes = 'lrv-u-padding-lr-1 lrv-u-padding-tb-050 lrv-u-font-size-18@mobile-max lrv-u-font-size-12 lrv-u-color-grey-light lrv-u-color-white:hover';
 
 module.exports = {
+	footer_menu_classes: 'lrv-a-grid lrv-a-cols3@tablet lrv-u-background-color-black lrv-u-color-white',
 	o_navs: [
 		o_nav,
 		o_nav,
 		o_nav
 	]
-};
+};

package/modules/footer-menus/footer-menus.twig

@@ -1,5 +1,5 @@
-<div class="footer-links // pmc-u-background-black pmc-a-grid pmc-a-cols3@tablet">
+<div class="footer-menus // {{ footer_menu_classes }}">
 	{% for item in o_navs %}
 		{% include "@larva/objects/o-nav/o-nav.twig" with item %}
 	{% endfor %}
-</div>
+</div>

package/modules/footer-newsletter/README.md

@@ -0,0 +1,5 @@
+# footer-newsletter
+
+This module is included in `footer` and does not have its own JSON configuration file. Refer to the `footer` readme for details on implementing the footer in a theme. 
+
+The form in this pattern uses the o-email-capture-form.minimal configuration.

package/modules/footer-newsletter/footer-newsletter.prototype.js

@@ -0,0 +1,21 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const o_email_capture_form_minimal = clonedeep( require( '../../objects/o-email-capture-form/o-email-capture-form.minimal' ) );
+const c_title = clonedeep( require( '../../components/c-title/c-title.prototype' ) );
+const c_tagline = clonedeep( require( '../../components/c-tagline/c-tagline.prototype' ) );
+
+c_title.c_title_url = false;
+c_title.c_title_text = 'Stay In The Know';
+c_title.c_title_classes = 'lrv-u-margin-b-025 lrv-u-font-family-primary lrv-u-text-align-center';
+
+c_tagline.c_tagline_text = 'Sign up for our daily newsletter';
+c_tagline.c_tagline_classes = 'lrv-u-font-size-14 u-font-style-italic lrv-u-font-family-basic lrv-u-text-align-center';
+
+o_email_capture_form_minimal.c_button.c_button_classes += ' lrv-a-icon-invert';
+
+module.exports = {
+	footer_newsletter_classes: 'lrv-u-text-align-center lrv-u-color-white lrv-u-background-color-black lrv-u-flex lrv-u-flex-direction-column lrv-u-align-items-center',
+	c_title: c_title,
+	c_tagline: c_tagline,
+	o_email_capture_form: o_email_capture_form_minimal
+};

package/modules/footer-newsletter/footer-newsletter.twig

@@ -0,0 +1,5 @@
+<section class="footer-newsletter // {{ footer_newsletter_classes }}">
+	{% include "@larva/components/c-title/c-title.twig" with c_title %}
+	{% include "@larva/components/c-tagline/c-tagline.twig" with c_tagline %}
+	{% include "@larva/objects/o-email-capture-form/o-email-capture-form.twig" with o_email_capture_form %}
+</section>

package/modules/footer-social/README.md

@@ -0,0 +1,3 @@
+# footer-social
+
+This module is included in `footer` and does not have its own JSON configuration file. Refer to the `footer` readme for details on implementing the footer in a theme. 

package/modules/footer-social/footer-social.prototype.js

@@ -1,29 +1,36 @@
-const path = require( 'path' );
-const clone = require( '@penskemediacorp/larva' ).clone;// This should be in this repo, probably
-const c_icon_path = path.resolve( __dirname, '../../components/c-icon/c-icon.prototype' );
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_icon_prototype = require( '../../components/c-icon/c-icon.prototype' );
+const c_title = clonedeep( require( '../../components/c-title/c-title.prototype' ) );
+const c_tagline = clonedeep( require( '../../components/c-tagline/c-tagline.prototype' ) );
+const o_social_list = clonedeep( require( '../../objects/o-social-list/o-social-list.prototype' ) );
+
+c_title.c_title_url = false;
+c_title.c_title_classes = 'lrv-u-margin-b-025 lrv-u-font-family-primary lrv-u-text-align-center';
+c_title.c_title_text = 'Connect with Us';
+
+c_tagline.c_tagline_classes = 'lrv-u-font-size-14 u-font-style-italic lrv-u-font-family-basic lrv-u-text-align-center';
+c_tagline.c_tagline_text = 'Get our latest stories in the feed of your favorite networks';
 
 const social = [ 'instagram', 'pinit', 'twitter', 'facebook', 'youtube' ];
-const o_social_list_icons = [];
+
+// Clear existing icons, update classes
+o_social_list.o_social_list_icons = [];
+o_social_list.o_social_list_classes = 'lrv-a-unstyle-list lrv-u-flex lrv-u-align-items-center lrv-u-justify-content-center';
+
 
 for (let i = 0; i < social.length; i++) {
-	let c_icon = clone( c_icon_path );
+	let c_icon = clonedeep( c_icon_prototype );
+	c_icon.c_icon_url = '#';
 	c_icon.c_icon_name = social[i];
-	c_icon.c_icon_link_classes += ' pmc-u-display-block pmc-u-border-radius-50p pmc-u-color-grey pmc-u-margin-lr-025 pmc-u-padding-a-050 pmc-u-background-white pmc-u-color-grey:hover';
+	c_icon.c_icon_link_classes += ' lrv-u-display-block lrv-u-border-radius-50p lrv-u-color-grey lrv-u-margin-lr-050 lrv-u-padding-a-050 lrv-u-background-color-white lrv-u-color-grey-dark:hover';
 
-	o_social_list_icons.push( c_icon );
+	o_social_list.o_social_list_icons.push( c_icon );
 }
 
 module.exports = {
-	"c_title": {
-		"c_title_classes": "pmc-u-margin-b-025 pmc-u-font-family-primary pmc-u-text-align-center",
-		"c_title_text": "Connect with Us"
-	},
-	"c_tagline": {
-		"c_tagline_classes": "pmc-u-font-size-14 u-font-style-italic pmc-u-font-family-basic pmc-u-text-align-center",
-		"c_tagline_text": "Get our latest stories in the feed of your favorite networks"
-	},
-	"o_social_list": {
-		"o_social_list_classes": "pmc-a-unstyle-list pmc-u-flex pmc-u-align-items-center pmc-u-justify-content-center",
-		"o_social_list_icons": o_social_list_icons
-	}
-};
+	footer_social_classes: 'lrv-u-text-align-center lrv-u-color-white lrv-u-background-color-black',
+	c_title: c_title,
+	c_tagline: c_tagline,
+	o_social_list: o_social_list
+};

package/modules/footer-social/footer-social.twig

@@ -1,5 +1,5 @@
-<section class="footer-social // pmc-u-text-align-center pmc-u-background-black pmc-u-color-white">
+<section class="footer-social // {{ footer_social_classes }}">
 	{% include "@larva/components/c-title/c-title.twig" with c_title %}
 	{% include "@larva/components/c-tagline/c-tagline.twig" with c_tagline %}
 	{% include "@larva/objects/o-social-list/o-social-list.twig" with o_social_list %}
-</section>
+</section>

package/modules/footer-tip/footer-tip.prototype.js

@@ -1,15 +1,23 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_button = clonedeep( require( '../../components/c-button/c-button.stripped' ) );
+const c_title = clonedeep( require( '../../components/c-title/c-title.prototype' ) );
+const c_tagline = clonedeep( require( '../../components/c-tagline/c-tagline.prototype' ) );
+
+c_button.c_button_classes += 'lrv-u-color-white lrv-u-color-grey-light:hover lrv-u-background-color-black lrv-u-font-size-12 lrv-u-font-weight-bold lrv-u-text-transform-uppercase lrv-a-icon-after lrv-a-icon-arrow-right lrv-a-icon-invert';
+c_button.c_button_text = 'Send Us a Tip';
+c_button.c_button_url = 'https://google.com';
+c_button.c_button_inner_classes = 'lrv-u-color-white lrv-u-color-grey-light:hover';
+
+c_title.c_title_classes = 'lrv-u-margin-b-025 lrv-u-font-family-primary';
+c_title.c_title_text = 'Have a Tip?';
+
+c_tagline.c_tagline_classes = 'lrv-u-font-size-14 u-font-style-italic lrv-u-font-family-basic';
+c_tagline.c_tagline_text = 'We want to hear from you! Send us a tip using our anonymous form.';
+
 module.exports = {
-	"c_title": {
-		"c_title_classes": "pmc-u-margin-b-025 pmc-u-font-family-primary",
-		"c_title_text": "Have a Tip?"
-	},
-	"c_tagline": {
-		"c_tagline_classes": "pmc-u-font-size-14 u-font-style-italic pmc-u-font-family-basic",
-		"c_tagline_text": "We want to hear from you! Send us a tip using our annonymous form."
-	},
-	"c_button": {
-		"c_button_classes": "pmc-u-color-white pmc-u-color-grey-light:hover pmc-u-background-black pmc-u-font-size-12 pmc-u-font-weight-bold pmc-u-text-transform-uppercase a-icon-after a-icon-arrow-right a-icon-invert",
-		"c_button_url": "https://deadline.com/tip-line/",
-		"c_button_text": "Send Us a Tip"
-	}
+	footer_tip_classes: 'lrv-u-text-align-center lrv-u-color-white lrv-u-background-color-black',
+	c_title: c_title,
+	c_tagline: c_tagline,
+	c_button: c_button
 };

package/modules/footer-tip/footer-tip.twig

@@ -1,5 +1,5 @@
-<section class="footer-tip // pmc-u-text-align-center pmc-u-background-black pmc-u-color-white">
+<section class="footer-tip // {{ footer_tip_classes }}">
 	{% include "@larva/components/c-title/c-title.twig" with c_title %}
 	{% include "@larva/components/c-tagline/c-tagline.twig" with c_tagline %}
 	{% include "@larva/components/c-button/c-button.twig" with c_button %}
-</section>
+</section>

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/heading/heading.h1.js

@@ -0,0 +1,8 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const heading = clonedeep( require( './heading.prototype' ) );
+
+heading.heading_typography_class = 'lrv-a-font-primary-xl';
+heading.heading_level_text = '1';
+
+module.exports = heading;

package/modules/heading/heading.h2.js

@@ -0,0 +1,8 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const heading = clonedeep( require( './heading.prototype' ) );
+
+heading.heading_typography_class = 'lrv-a-font-accent-l';
+heading.heading_level_text = '2';
+
+module.exports = heading;

package/modules/heading/heading.h3.js

@@ -0,0 +1,8 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const heading = clonedeep( require( './heading.prototype' ) );
+
+heading.heading_typography_class = 'lrv-a-font-secondary-l';
+heading.heading_level_text = '3';
+
+module.exports = heading;