@penskemediacorp/larva-patterns 0.6.0 → 0.6.4-develop.17

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

@@ -0,0 +1,8 @@
+module.exports = {
+	c_input_type_attr: 'text',
+	c_input_id_attr: 'inputExample',
+	c_input_label_class: 'lrv-a-screen-reader-only',
+	c_input_label_text: 'Input Example',
+	c_input_class: '',
+	c_input_placeholder_attr: 'Enter text.',
+};

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

@@ -0,0 +1,14 @@
+<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_id_attr }}"
+		placeholder="{{ c_input_placeholder_attr }}"
+		aria-invalid="{{ c_input_aria_invalid_attr }}"
+		data-error="{{ c_input_error_attr }}"
+		size="{{ c_input_size_attr }}"
+		maxlength="{{ c_input_maxlength_attr }}"
+	/>
+</label>

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

@@ -4,6 +4,7 @@ module.exports = {
 	c_lazy_image_link_classes: 'lrv-a-unstyle-link',
 	c_lazy_image_crop_class: 'lrv-a-crop-16x9',
 	c_lazy_image_crop_style_attr: false,
+	c_lazy_image_link_tab_index_attr: false,
 	c_lazy_image_alt_attr: 'Lazy loaded image',
 	c_lazy_image_src_url: 'https://farm5.staticflickr.com/4078/5441060528_31db7838ba_z.jpg',
 	c_lazy_image_placeholder_url: 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==',
@@ -11,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

@@ -1,6 +1,10 @@
 <div class="c-lazy-image {{ modifier_class }} {{ c_lazy_image_classes }}">
 	{% if c_lazy_image_link_url %}
-		<a href="{{ c_lazy_image_link_url }}" class="c-lazy-image__link {{ c_lazy_image_link_classes }}">
+		<a href="{{ c_lazy_image_link_url }}" class="c-lazy-image__link {{ c_lazy_image_link_classes }}"
+			{% if c_lazy_image_link_tab_index_attr %}
+				tabindex="{{ c_lazy_image_link_tab_index_attr }}"
+			{% endif %}
+		>
 	{% endif %}
 
 	{% if c_lazy_image_crop_class %}
@@ -10,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/components/c-svg/c-svg.prototype.js

@@ -0,0 +1,4 @@
+module.exports = {
+	c_svg_classes: '',
+	c_svg_name: 'brand-logo'
+}

package/components/c-svg/c-svg.twig

@@ -0,0 +1,3 @@
+<div class="c-svg {{ c_svg_classes }}">
+	{% include '../../build/svg/' ~ c_svg_name ~ '.svg' %}
+</div>

package/modules/age-gate/README.md

@@ -0,0 +1,3 @@
+# age-gate
+
+This module is relied heavily upon in the `pmc-age-gate` plugin and contains `js-` classes in the twig file that are important to its functionality.

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

@@ -0,0 +1,68 @@
+const clonedeep = require('lodash.clonedeep');
+
+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'));
+
+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-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-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;
+
+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_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_month_item,
+	o_input_day_item,
+	o_input_year_item
+];
+
+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 = {
+	age_gate_class: 'lrv-u-height-100p lrv-u-padding-t-2 lrv-u-background-color-black lrv-u-text-align-center lrv-u-color-white',
+	age_gate_inner_class: 'lrv-u-max-width-1000 lrv-u-margin-lr-auto',
+	age_gate_form_class: 'lrv-u-border-b-1',
+	age_gate_error_class: '',
+	form_wrapper_class: '',
+	age_gate_footer_class: 'lrv-u-border-t-1 lrv-u-margin-t-025',
+	c_heading,
+	c_svg_header,
+	o_input_group,
+	c_button,
+	c_dek
+};

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

@@ -0,0 +1,37 @@
+<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 }}">
+			{% 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 %}
+		</div>
+		<div class="age-gate-form // {{ age_gate_form_class }}">
+			<form class="js-AgeGateForm">
+				{% if o_input_group %}
+					{% include "@larva/objects/o-input-group/o-input-group.twig" with o_input_group %}
+				{% endif %}
+				<div class="age-gate-error // {{ age_gate_error_class }}"></div>
+				<div class="age-gate-button-wrapper">
+					{% include "@larva/components/c-button/c-button.twig" with c_button %}
+				</div>
+			</form>
+		</div>
+		<div class="age-gate-footer // {{ age_gate_footer_class }}">
+			{% 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/brands-most-popular/brands-most-popular.prototype.js

@@ -0,0 +1,40 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_heading_prototype = require( '../../components/c-heading/c-heading.prototype' );
+const o_card_prototype = require( '../../objects/o-card/o-card.prototype' );
+const c_title_prototype = require( '../../components/c-title/c-title.prototype' );
+const c_svg_prototype = require( '../../components/c-svg/c-svg.prototype' );
+const c_span_prototype = require( '../../components/c-span/c-span.prototype' );
+
+const c_heading = clonedeep( c_heading_prototype );
+const o_card = clonedeep( o_card_prototype );
+const c_title = clonedeep( c_title_prototype );
+const c_svg = clonedeep( c_svg_prototype );
+const c_span = clonedeep( c_span_prototype );
+
+c_heading.c_heading_text = 'Most Popular';
+
+c_svg.c_svg_classes = 'lrv-u-height-16 lrv-u-color-black';
+c_svg.c_svg_name = 'brand-logo';
+
+c_title.c_title_text = 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi expedita pariatur.';
+c_title.c_title_classes += ' lrv-u-margin-b-075';
+c_title.c_title_url = false;
+
+o_card.o_card_classes = 'lrv-u-flex lrv-u-height-100p lrv-u-color-brand-primary:hover';
+o_card.o_card_link_url = '#';
+o_card.o_card_link_classes = 'lrv-a-unstyle-link';
+o_card.o_card_content_classes = 'lrv-u-flex lrv-u-flex-direction-column';
+o_card.o_card_image_wrap_classes = '';
+o_card.c_lazy_image = false;
+o_card.c_span = false;
+o_card.c_svg = c_svg;
+o_card.c_title = c_title;
+o_card.c_timestamp = false;
+
+module.exports = {
+	brands_most_popular_classes: 'lrv-a-wrapper lrv-u-margin-b-150',
+	brands_most_popular_items_wrapper_classes: '',
+	c_heading: c_heading,
+	popular_items: [ o_card, o_card, o_card, o_card ],
+};

package/modules/brands-most-popular/brands-most-popular.twig

@@ -0,0 +1,11 @@
+<section class="brands-most-popular // {{brands_most_popular_classes}}">
+	{% if c_heading %}
+		{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
+	{% endif %}
+
+	<div class="{{ brands_most_popular_items_wrapper_classes }}">
+		{% for item in popular_items %}
+			{% include "@larva/objects/o-card/o-card.twig" with item %}
+		{% endfor %}
+	</div>
+</section>

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/featured-stories/featured-stories.prototype.js

@@ -0,0 +1,23 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const story_prototype = require( '@penskemediacorp/larva-patterns/modules/story/story.prototype' );
+
+const story = clonedeep( story_prototype );
+
+story.story_grid_classes = '';
+
+story.story_grid_primary_classes = 'lrv-u-margin-r-00';
+
+story.story_grid_secondary_classes += ' lrv-u-padding-lr-1 lrv-u-padding-lr-2@desktop-xl lrv-u-padding-tb-075 lrv-u-padding-tb-150@desktop-xl';
+
+const featured_story = clonedeep( story );
+
+/**
+ * Budle all objects.
+ */
+module.exports = {
+	featured_stories_classes: '',
+	featured_story,
+	featured_stories_secondary_classes: 'lrv-a-grid lrv-a-cols3@desktop',
+	story_items: [ story, story, story ],
+};

package/modules/featured-stories/featured-stories.twig

@@ -0,0 +1,18 @@
+<div class="featured-stories // {{ featured_stories_classes }}">
+
+	{% if featured_story %}
+		<div class="featured-stories__primary // {{ featured_stories_primary_classes }}" >
+			{% include "@larva/modules/story/story.twig" with featured_story %}
+		</div>
+	{% endif %}
+
+	{% if c_heading %}
+		{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
+	{% endif %}
+
+	<div class="featured-stories__secondary {{ featured_stories_secondary_classes }}">
+		{% for item in story_items %}
+			{% include "@larva/modules/story/story.twig" with item %}
+		{% endfor %}
+	</div>
+</div>

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

@@ -0,0 +1,43 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_button_prototype = require( '../../components/c-button/c-button.prototype.js' );
+const get_digital_access = clonedeep( c_button_prototype );
+const get_magazine = clonedeep( c_button_prototype );
+const get_gift = clonedeep( c_button_prototype );
+const customer_service = clonedeep( c_button_prototype );
+
+get_digital_access.c_button_type_attr = 'button';
+get_digital_access.c_button_inner_classes = 'lrv-u-display-inline-block lrv-u-border-color-grey lrv-u-border-color-white:hover lrv-u-padding-tb-050 lrv-u-padding-lr-025 lrv-u-width-100p lrv-u-border-a-1';
+get_digital_access.c_button_classes = 'lrv-u-text-align-center lrv-u-margin-b-1 lrv-u-padding-a-025 lrv-u-background-color-brand-primary:hover lrv-u-color-white:hover lrv-u-font-weight-bold lrv-a-font-body-xxs lrv-u-background-color-white lrv-u-color-black cx-dynamic-link';
+get_digital_access.c_button_screen_reader_text = 'Get Digital Access';
+get_digital_access.c_button_text = 'Get Digital Access';
+get_digital_access.c_button_url = '#get-digital-access';
+
+get_magazine.c_button_type_attr = 'button';
+get_magazine.c_button_inner_classes = 'lrv-u-display-inline-block lrv-u-border-color-grey lrv-u-border-color-white:hover lrv-u-padding-tb-050 lrv-u-padding-lr-025 lrv-u-width-100p lrv-u-border-a-1';
+get_magazine.c_button_classes = 'lrv-u-text-align-center lrv-u-margin-b-1 lrv-u-padding-a-025 lrv-u-background-color-brand-primary:hover lrv-u-color-white:hover lrv-u-font-weight-bold lrv-a-font-body-xxs lrv-u-background-color-white lrv-u-color-black';
+get_magazine.c_button_screen_reader_text = 'Get The Magazine';
+get_magazine.c_button_text = 'Get The Magazine';
+get_magazine.c_button_url = '#get-the-magazine';
+
+get_gift.c_button_type_attr = 'button';
+get_gift.c_button_inner_classes = 'lrv-u-display-inline-block lrv-u-border-color-grey lrv-u-border-color-white:hover lrv-u-padding-tb-050 lrv-u-padding-lr-025 lrv-u-width-100p lrv-u-border-a-1';
+get_gift.c_button_classes = 'lrv-u-text-align-center lrv-u-margin-b-1 lrv-u-padding-a-025 lrv-u-background-color-brand-primary:hover lrv-u-color-white:hover lrv-u-font-weight-bold lrv-a-font-body-xxs lrv-u-color-white lrv-u-border-a-1 lrv-u-border-color-grey lrv-u-border-color-brand-primary-dark:hover';
+get_gift.c_button_screen_reader_text = 'Get a Gift';
+get_gift.c_button_text = 'Get a Gift';
+get_gift.c_button_url = '#get-a-gift';
+
+customer_service.c_button_type_attr = 'button';
+customer_service.c_button_inner_classes = 'lrv-u-display-inline-block lrv-u-border-color-grey lrv-u-border-color-white:hover lrv-u-padding-tb-050 lrv-u-padding-lr-025 lrv-u-width-100p lrv-u-border-a-1';
+customer_service.c_button_classes = 'lrv-u-text-align-center lrv-u-margin-b-1 lrv-u-padding-a-025 lrv-u-background-color-brand-primary:hover lrv-u-color-white:hover lrv-u-font-weight-bold lrv-a-font-body-xxs lrv-u-color-white lrv-u-border-a-1 lrv-u-border-color-grey lrv-u-border-color-brand-primary-dark:hover';
+customer_service.c_button_screen_reader_text = 'Customer Service';
+customer_service.c_button_text = 'Customer Service';
+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: '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/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/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,
+};