@penskemediacorp/larva-patterns 1.7.0-alpha.0 → 1.7.2

package/modules/breaking-news/breaking-news.prototype.js

@@ -0,0 +1,29 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_heading = clonedeep( require( '@penskemediacorp/larva-patterns/components/c-heading/c-heading.prototype' ) );
+const c_title = clonedeep( require( '@penskemediacorp/larva-patterns/components/c-title/c-title.prototype' ) );
+const c_icon = clonedeep( require( '@penskemediacorp/larva-patterns/components/c-icon/c-icon.prototype' ) );
+
+
+c_heading.c_heading_text = 'Breaking News';
+c_heading.c_heading_classes = 'lrv-a-font-secondary-bold-l lrv-u-margin-r-1 lrv-u-text-transform-uppercase lrv-u-margin-b-050@mobile-max';
+
+c_title.c_title_text = 'US Stadiums Partnership, Inc. Files for Bankruptcy Amid Historic Cancellations';
+c_title.c_title_classes = 'lrv-u-font-size-18 lrv-u-line-height-copy lrv-u-font-weight-normal lrv-u-font-family-basic';
+c_title.c_title_link_classes = 'lrv-a-unstyle-link ';
+
+c_icon.c_icon_link_classes = 'dismiss-news-banner lrv-u-color-white lrv-u-cursor-pointer lrv-u-width-16 lrv-u-height-16 lrv-u-color-white:hover lrv-u-margin-l-auto';
+c_icon.c_icon_url = '#';
+c_icon.c_icon_target_attr = false;
+c_icon.c_icon_name = 'close';
+c_icon.c_icon_link_screen_reader_text = false;
+c_icon.c_icon_screen_reader_text = 'close';
+c_icon.c_icon_screen_reader_title_attr = 'close';
+
+module.exports = {
+	breaking_news_classes: 'lrv-u-background-color-brand-primary lrv-u-color-white',
+	breaking_news_inner_classes: 'lrv-a-wrapper lrv-u-flex lrv-u-flex-direction-column@mobile-max lrv-u-align-items-center lrv-u-padding-tb-1',
+	c_heading: c_heading,
+	c_title: c_title,
+	c_icon: c_icon
+};

package/modules/breaking-news/breaking-news.twig

@@ -0,0 +1,18 @@
+<section class="breaking-news // pmc-breaking-news {{ breaking_news_classes }} ">
+
+	<div class="{{breaking_news_inner_classes}}">
+
+		{% if c_heading %}
+			{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
+		{% endif %}
+
+		{% if c_title %}
+			{% include "@larva/components/c-title/c-title.twig" with c_title %}
+		{% endif %}
+
+		{% if c_icon %}
+			{% include "@larva/components/c-icon/c-icon.twig" with c_icon %}
+		{% endif %}
+	</div>
+
+</section>

package/modules/button/button.prototype.js

@@ -0,0 +1,9 @@
+module.exports = {
+	button_url: null,
+	button_classes: 'lrv-u-padding-tb-050 lrv-u-padding-lr-1',
+	button_markup: 'Button Text',
+	button_background_color_class: 'lrv-u-background-color-brand-primary',
+	button_color_class: 'lrv-u-color-white',
+	button_typography_class: '',
+	button_width_class: '',
+};

package/modules/button/button.twig

@@ -0,0 +1,7 @@
+<a class="button larva // {{ button_classes }} {{ button_typography_class }} {{ button_background_color_class }} {{ button_color_class }} {{ button_width_class }}"
+	{% if button_url %}
+		href="{{ button_url }}"
+	{% endif %}
+>
+	{{ button_markup }}
+</a>

package/modules/buy-now/buy-now.prototype.js

@@ -0,0 +1,36 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+// Image
+const c_lazy_image_prototype = require( '@penskemediacorp/larva-patterns/components/c-lazy-image/c-lazy-image.prototype' );
+
+const c_lazy_image = clonedeep( c_lazy_image_prototype );
+
+c_lazy_image.c_lazy_image_srcset_attr = false;
+c_lazy_image.c_lazy_image_sizes_attr = false;
+c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-1x1';
+
+// Icon Button
+const c_icon_button = clonedeep( require( '../../objects/o-icon-button/o-icon-button.prototype' ) );
+
+c_icon_button.o_icon_button_url = true;
+c_icon_button.o_button_url = '#';
+c_icon_button.o_icon_button_classes += ' lrv-a-buy-now__button lrv-u-font-size-14 lrv-u-font-weight-bold lrv-u-text-transform-uppercase lrv-u-border-t-3 lrv-u-border-r-1 lrv-u-border-b-3 lrv-u-border-l-1 lrv-u-padding-tb-050 lrv-u-padding-lr-1 lrv-u-background-color-white lrv-u-color-black lrv-u-border-color-currentColor';
+c_icon_button.o_icon_button_target_attr = '_blank';
+c_icon_button.o_icon_button_rel_attr = 'nofollow';
+
+c_icon_button.c_icon.c_icon_name = 'triangle-right';
+c_icon_button.c_icon.c_icon_screen_reader_text = '';
+c_icon_button.c_span.c_span_text = 'Buy Now';
+
+// Export
+module.exports = {
+	buy_now_div_classes: 'lrv-a-buy-now lrv-u-font-family-basic',
+	buy_now_hr_top_classes: 'lrv-a-buy-now__hr lrv-a-buy-now__hr--top',
+	buy_now_img_classes: 'lrv-a-buy-now__image',
+	buy_now_hr_bottom_classes: 'lrv-a-buy-now__hr lrv-a-buy-now__hr--bottom',
+	buy_now_p_classes: 'lrv-a-buy-now__p lrv-u-font-family-basic lrv-u-font-size-14',
+	buy_now_span_classes: 'lrv-a-buy-now__span lrv-u-font-weight-bold lrv-u-text-transform-uppercase lrv-u-color-grey lrv-u-font-size-10',
+	buy_now_store_credit_text: '', // 'Amazon' for example
+	c_lazy_image,
+	c_icon_button,
+};

package/modules/buy-now/buy-now.twig

@@ -0,0 +1,23 @@
+{% if c_lazy_image %}
+	<div class="{{ buy_now_div_classes }}">
+		<hr class="{{ buy_now_hr_top_classes }}">
+
+		<div class="{{ buy_now_img_classes }}">
+			{% include "@larva/components/c-lazy-image/c-lazy-image.twig" with c_lazy_image %}
+		</div>
+
+		{% include "@larva/objects/o-icon-button/o-icon-button.twig" with c_icon_button %}
+
+		<hr class="{{ buy_now_hr_bottom_classes }}">
+
+		{% if buy_now_store_credit_text %}
+			<span class="{{ buy_now_span_classes }}">
+				{{ buy_now_store_credit_text }}
+			</span>
+		{% endif %}
+	</div>
+{% else %}
+	<p class="{{ buy_now_p_classes }}">
+		{% include "@larva/objects/o-icon-button/o-icon-button.twig" with c_icon_button %}
+	</p>
+{% endif %}

package/modules/carousel-grid/README.md

@@ -0,0 +1,7 @@
+This module renders Carousel block posts in the Gutenberg editor.
+
+The default pattern renders a primary post, with two secondary posts in the sidebar.
+
+The overlay pattern displays a fuller width primary post with text overlay, and a stacked row of three secondary posts.
+
+The primary post displays section title, a post image and title, author byline and timestamp; the secondary posts display a post image and title only.

package/modules/carousel-grid/carousel-grid.overlay.js

@@ -0,0 +1,26 @@
+const clonedeep = require( 'lodash.clonedeep' );
+const { __experimentalCloneWithFallback } = require( '@penskemediacorp/larva' );
+
+const carousel_grid_overlay = __experimentalCloneWithFallback( 'modules/carousel-grid/carousel-grid.prototype' );
+
+carousel_grid_overlay.o_card_large.o_card_classes = 'lrv-a-carousel-grid__overlay--primary';
+carousel_grid_overlay.o_card_large.o_card_content_classes += ' lrv-a-carousel-grid__overlay--primary-content';
+
+carousel_grid_overlay.o_card_large.c_lazy_image.c_lazy_image_classes = 'lrv-a-carousel-grid__overlay--primary-img';
+carousel_grid_overlay.o_card_large.c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-3x2';
+
+carousel_grid_overlay.carousel_grid_overlay_layout_classes = 'lrv-a-carousel-grid__overlay';
+carousel_grid_overlay.carousel_grid_overlay_secondary_classes = 'lrv-a-carousel-grid__overlay--secondary';
+
+const o_card_item = clonedeep( carousel_grid_overlay.o_card_items[0] );
+
+carousel_grid_overlay.o_card_items = [o_card_item, o_card_item, o_card_item];
+
+o_card_item.o_card_classes += ' lrv-a-carousel-grid__overlay--secondary-card lrv-u-align-items-center';
+
+o_card_item.c_title.c_title_classes = 'lrv-a-font-secondary-m';
+
+o_card_item.c_lazy_image.c_lazy_image_classes += ' lrv-u-width-100p';
+o_card_item.c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-1x1';
+
+module.exports = carousel_grid_overlay;

package/modules/carousel-grid/carousel-grid.prototype.js

@@ -0,0 +1,50 @@
+const clonedeep = require( 'lodash.clonedeep' );
+const { __experimentalCloneWithFallback } = require( '@penskemediacorp/larva' );
+
+const o_card_prototype = clonedeep( require( '../../objects/o-card/o-card.prototype' ) );
+const o_author = __experimentalCloneWithFallback( 'objects/o-author/o-author.prototype' );
+const o_card = clonedeep( o_card_prototype );
+
+o_card.o_card_classes = 'lrv-u-margin-b-1';
+o_card.o_card_content_classes = ' lrv-u-margin-t-050';
+
+o_card.c_lazy_image.c_lazy_image_classes += ' ';
+o_card.c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-3x2';
+
+o_card.c_lazy_image.c_lazy_image_link_url = '#';
+
+o_card.c_span.c_span_url = '#';
+o_card.c_span.c_span_text = false;
+
+o_card.c_title.c_title_text = '‘Solo: A Star Wars Story’ Is Going to Cannes, So Does That Mean It’s Good?';
+o_card.c_title.c_title_classes = 'lrv-a-font-primary-xxxs';
+o_card.c_title.c_title_link_classes = 'lrv-a-unstyle-link';
+
+o_card.c_timestamp.c_timestamp_text = false;
+
+const o_card_large = clonedeep( o_card );
+
+o_card_large.c_span.c_span_text = 'Film';
+
+o_card_large.c_title.c_title_text = '‘Avengers: Infinity War’ vs. ‘Black Panther’: 10 Factors That Will Determine Which Film Is Box-Office King';
+
+o_card_large.o_author = clonedeep( o_author );
+o_card_large.o_author.o_author_text = 'By ';
+o_card_large.o_author.c_span.c_span_text = 'Author Name';
+o_card_large.o_author.c_timestamp.c_timestamp_text = 'July 7, 2021';
+o_card_large.o_author.c_timestamp.c_timestamp_classes = 'lrv-a-icon-before lrv-a-icon-bullet';
+
+// o_card_large uses o_author components that are not needed/used by o_card.
+o_card.o_author = false;
+
+o_card_large.o_card_classes = '';
+o_card_large.o_card_content_classes = 'lrv-u-padding-a-1';
+o_card_large.c_title.c_title_classes = 'lrv-a-font-primary-xs lrv-u-margin-tb-050';
+
+module.exports = {
+	o_card_large,
+	o_card_items: [
+		o_card,
+		o_card
+	]
+};

package/modules/carousel-grid/carousel-grid.twig

@@ -0,0 +1,17 @@
+<div class="carousel-grid //">
+	<div class="lrv-a-wrapper">
+		<div class="lrv-a-carousel-grid {{ carousel_grid_overlay_layout_classes }}">
+
+			<div class="lrv-u-padding-a-1">
+				{% include "@larva/objects/o-card/o-card.twig" with o_card_large %}
+			</div>
+
+			<div class="lrv-u-padding-a-1 {{ carousel_grid_overlay_secondary_classes }}">
+				{% for item in o_card_items %}
+					{% include "@larva/objects/o-card/o-card.twig" with item %}
+				{% endfor %}
+			</div>
+
+		</div>
+	</div>
+</div>

package/modules/carousel-slider/carousel-slider.prototype.js

@@ -0,0 +1,56 @@
+const clonedeep = require( 'lodash.clonedeep' );
+const { __experimentalCloneWithFallback } = require( '@penskemediacorp/larva' );
+
+const c_heading_prototype = require( '../../components/c-heading/c-heading.prototype' );
+const c_heading = clonedeep( c_heading_prototype );
+
+const c_icon_prototype = require( '../../components/c-icon/c-icon.prototype' );
+const c_icon = clonedeep( c_icon_prototype );
+
+const o_card_prototype = require( '../../objects/o-card/o-card.prototype' );
+const o_card = clonedeep( o_card_prototype );
+
+const o_indicator_photos = __experimentalCloneWithFallback( 'objects/o-indicator/o-indicator.photos' );
+
+o_card.o_indicator = o_indicator_photos;
+
+o_card.o_card_link_url = '#';
+o_card.o_card_link_classes = 'lrv-a-unstyle-link lrv-u-display-block';
+o_card.c_lazy_image.c_lazy_image_classes = 'lrv-u-margin-b-050@mobile-max lrv-u-margin-b-1';
+o_card.c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-16x9';
+o_card.c_lazy_image.c_lazy_image_image_classes = 'u-box-shadow-medium';
+o_card.c_lazy_image.c_lazy_image_placeholder_url = 'https://live.staticflickr.com/4685/24635253357_483728d136_c.jpg';
+o_card.o_card_image_wrap_classes = 'lrv-a-glue-parent';
+o_card.c_lazy_image.c_lazy_image_caption_markup = false;
+o_card.c_lazy_image.c_lazy_image_credit_text = false;
+o_card.c_span = false;
+o_card.c_timestamp = false;
+o_card.c_title.c_title_link_classes = 'lrv-a-unstyle-link';
+o_card.c_title.c_title_classes = 'lrv-a-font-primary-xxs lrv-u-text-align-center';
+o_card.c_title.c_title_url = false;
+o_card.c_title.c_title_id_attr = false;
+
+const titles = [
+	'Banksy Painting Sells for Record-Demolishing $12.2 M. at Sotheby’s London',
+	'Famed Art Historian Germano Celant to Curate KAWS Exhibition in Qatar',
+	'Yayoi Kusama ‘Infinity Room’ Heads to Toledo Museum of Art as Part of ‘Multi-Sensory Experience’ Push',
+	'After the Flood: Artists Fill Amsterdam Gallery with Wet Clay, Establish Safety Fund',
+	'Frieze London Sales Accumulate, Museum Boards Go Under the Scope, and More—Morning Links from October 3, 2019',
+	'KAWS Hit With Criticism in China for Mao-Based Artwork—Artist Responds [Updated]',
+	'Deborah Marrow, Game-Changing Getty Foundation Leader, Has Died',
+	'As Brexit Looms at Frieze London, $6.5 M. Twombly and $5 M. Guston Sell, While $32 M. Botticelli Awaits Buyer',
+	'German Museum to Give Walid Raad Art Prize Despite City Government’s Objection: Report',
+	'Pace Gallery Plans Paris Presence'
+];
+
+let galleries = [];
+
+for (let i = 0; i < titles.length; i++) {
+	let card = clonedeep( o_card );
+	card.c_title.c_title_text = titles[i];
+	galleries.push( card );
+}
+
+module.exports = {
+	galleries: galleries,
+};

package/modules/carousel-slider/carousel-slider.twig

@@ -0,0 +1,11 @@
+<section class="carousel-slider //">
+	<div class="lrv-a-wrapper lrv-u-padding-tb-1">
+		<div class="js-Flickity js-Flickity--one-thirds js-Flickity--nav-top-right js-Flickity--hide-nav@mobile-max">
+			{% for item in galleries %}
+				<div class="js-Flickity-cell lrv-u-margin-r-150">
+					{% include "@larva/objects/o-card/o-card.twig" with item %}
+				</div>
+			{% endfor %}
+		</div>
+	</div>
+</section>

package/modules/container/README.md

@@ -0,0 +1,3 @@
+Generic module for a containing element around HTML/markup.
+
+This could be updated to support an action.

package/modules/container/container.prototype.js

@@ -0,0 +1,7 @@
+module.exports = {
+	container_markup: 'hello markup',
+	container_classes: 'lrv-a-font-body-m lrv-u-width-75p lrv-u-margin-lr-auto',
+	container_background_color_class: '',
+	container_color_class: '',
+	container_text_align_class: '',
+}

package/modules/container/container.twig

@@ -0,0 +1 @@
+<div class="container // {{ container_classes }} {{ container_background_color_class }} {{ container_color_class }} {{ container_text_align_class }}">{{ container_markup }}</div>

package/modules/content-showcase/content-showcase.prototype.js

@@ -0,0 +1,30 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const o_card = clonedeep( require( '@penskemediacorp/larva-patterns/objects/o-card/o-card.prototype' ) );
+const article_kicker =  clonedeep( require( '../article-kicker/article-kicker.prototype' ) );
+
+o_card.o_card_classes = 'lrv-u-display-inline-flex lrv-u-flex-basis-100p@desktop-xl lrv-u-flex-basis-100p@desktop lrv-u-padding-tb-075@mobile-max';
+o_card.o_card_link_classes = 'lrv-u-flex';
+o_card.o_card_link_url = '#';
+o_card.o_card_image_wrap_classes = 'lrv-u-flex-basis-40p@desktop lrv-u-flex-basis-40p@desktop-xl lrv-u-flex-basis-25p@mobile-max';
+o_card.o_card_content_classes = 'lrv-u-margin-l-1 lrv-u-color-brand-primary:hover lrv-u-flex-basis-60p@desktop lrv-u-flex-basis-60p@desktop-xl lrv-u-flex-basis-55p@mobile-max';
+
+o_card.c_lazy_image.c_lazy_image_link_url = '';
+o_card.c_lazy_image.c_lazy_image_classes = 'lrv-u-margin-l-auto lrv-u-width-100';
+o_card.c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-1x1';
+o_card.article_kicker = article_kicker;
+o_card.article_kicker.article_kicker_text = 'Article Kicker';
+
+o_card.o_span_group = false;
+o_card.c_span = false;
+o_card.c_title.c_title_url = '';
+o_card.c_title.c_title_text = 'Perfection is rarely achieved in movies, but this heaven-sent concert doc hits the sweet spot.';
+o_card.c_title.c_title_classes = 'lrv-u-font-weight-normal lrv-u-margin-tb-1';
+o_card.c_timestamp = false;
+o_card.c_tagline = false;
+o_card.o_author = false;
+
+module.exports = {
+    content_showcase_items_classes: 'lrv-u-flex lrv-u-flex-direction-column@mobile-max lrv-u-padding-tb-1@desktop lrv-u-width-100p lrv-u-padding-lr-125@mobile-max',
+    content_showcase_items: [ o_card, o_card, o_card ]
+}

package/modules/content-showcase/content-showcase.the-moth.js

@@ -0,0 +1,33 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const content_showcase = clonedeep( require( './content-showcase.prototype' ) );
+const o_card = clonedeep( require( '../../objects/o-card/o-card.prototype' ) );
+const article_kicker =  clonedeep( require( '../article-kicker/article-kicker.prototype' ) );
+
+o_card.c_dek = false;
+o_card.c_span = false;
+o_card.c_timestamp = false;
+o_card.c_tagline = false;
+o_card.o_author = false;
+
+o_card.o_card_classes = 'lrv-u-display-inline-flex lrv-u-flex-basis-100p@desktop-xl lrv-u-flex-basis-100p@desktop lrv-u-padding-tb-00@mobile-max lrv-u-flex-shrink-0@mobile-max';
+o_card.o_card_link_classes = 'lrv-u-flex';
+o_card.o_card_link_url = '#';
+o_card.o_card_image_wrap_classes = 'lrv-u-flex-basis-40p@desktop lrv-u-flex-basis-40p@desktop-xl lrv-u-flex-basis-25p@mobile-max';
+o_card.c_lazy_image.c_lazy_image_classes = 'lrv-u-width-100';
+o_card.o_card_content_classes = 'lrv-u-margin-l-1 lrv-u-color-brand-primary:hover lrv-u-flex-basis-60p@desktop lrv-u-flex-basis-60p@desktop-xl lrv-u-flex-basis-55p@mobile-max lrv-u-color-black';
+o_card.c_title.c_title_text = 'Canceling Noodle The Pug';
+o_card.c_title.c_title_classes = 'lrv-a-font-body-l lrv-u-text-decoration-underline:hover lrv-u-margin-b-00 lrv-u-margin-t-050 lrv-u-line-height-copy';
+o_card.c_title.c_title_link_classes = 'lrv-u-color-black lrv-u-color-brand-secondary-dark:hover';
+o_card.c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-1x1';
+o_card.article_kicker = article_kicker;
+o_card.article_kicker.article_kicker_classes = 'lrv-u-color-black lrv-u-color-brand-secondary-dark:hover lrv-u-text-transform-uppercase lrv-a-font-basic-s lrv-u-position-relative lrv-u-padding-b-050';
+o_card.article_kicker.article_kicker_link_classes = 'lrv-u-color-black';
+
+
+content_showcase.content_showcase_classes = 'the-moth lrv-u-border-t-1 lrv-u-font-family-body lrv-a-glue-parent';
+content_showcase.content_showcase_items_classes = 'the-moth-items lrv-u-overflow-auto@mobile-max lrv-u-padding-r-2@mobile-max lrv-u-flex-shrink-0@mobile-max lrv-u-border-b-1 lrv-u-border-t-1 lrv-u-flex lrv-u-margin-t-025 lrv-u-padding-lr-125@mobile-max lrv-u-padding-tb-150 lrv-u-width-100p';
+
+content_showcase.content_showcase_items = [ o_card, o_card, o_card, o_card ];
+
+module.exports = content_showcase;

package/modules/content-showcase/content-showcase.twig

@@ -0,0 +1,7 @@
+<div class="content-showcase larva // {{ content_showcase_classes }}">
+	<div class="content-showcase-items // {{ content_showcase_items_classes }}">
+		{% for item in content_showcase_items %}
+			{% include "@larva/objects/o-card/o-card.twig" with item %}
+		{% endfor %}
+	</div>
+</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/featured-stories/featured-stories.prototype.js

@@ -0,0 +1,27 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const story_prototype = require( '@penskemediacorp/larva-patterns/modules/story/story.prototype' );
+const article_kicker = require( '@penskemediacorp/larva-patterns/modules/article-kicker/article-kicker.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 );
+
+story.article_kicker = article_kicker;
+story.c_span = false;
+
+/**
+ * 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/README.md

@@ -0,0 +1,15 @@
+# footer
+
+This module is the large footer at the bottom of each of PMC's sites. It contains a set of menus with corporate and company information, a newsletter signup, list of social networks, and a tip submission prompt. 
+
+This module should not be designed according to brand, and should only assume the primary font family for headings. It relies on the MobileHeightToggle JS pattern for handling the menus on smaller screens.
+
+To use this module in a theme, the templates should be parsed from Larva, as well as the JSON for `footer` parsed from Larva. 
+
+If this module or any of the modules included in it are updated, follow these steps to update the module in a theme, or to use it for the first time:
+
+1. Uncomment the relativeSrcOverride key in the `parser` object in larva.config.js
+2. Ensure that the modified file time of the Twig file is later than the PHP files, or delete the existing PHP template files
+3. run `npm run parser` from theme/assets/
+4. run `npm run write-json larva modules footer` from theme/assets/
+5. Re-comment relativeSrcOverride key in the `parser` object in larva.config.js

package/modules/footer/footer.prototype.js

@@ -0,0 +1,14 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const footer_menus = clonedeep( require( '../footer-menus/footer-menus.prototype' ) );
+const footer_social = clonedeep( require( '../footer-social/footer-social.prototype' ) );
+const footer_tip = clonedeep( require( '../footer-tip/footer-tip.prototype' ) );
+const footer_newsletter = clonedeep( require( '../footer-newsletter/footer-newsletter.prototype' ) );
+
+module.exports = {
+	footer_classes: "lrv-u-background-color-black lrv-u-color-white lrv-u-padding-tb-1",
+	footer_menus: footer_menus,
+	footer_social: footer_social,
+	footer_tip: footer_tip,
+	footer_newsletter: footer_newsletter,
+};

package/modules/footer/footer.twig

@@ -0,0 +1,22 @@
+<footer class="footer // {{ footer_classes }}">
+	<div class="lrv-a-wrapper">
+		{% include "@larva/modules/footer-menus/footer-menus.twig" with footer_menus %}
+
+		{% if footer_social %}
+
+			<div class="lrv-a-grid lrv-a-cols3@desktop lrv-u-border-t-1 lrv-u-border-color-grey lrv-u-padding-tb-1">
+				<div class="lrv-u-border-r-1 lrv-u-border-color-grey lrv-u-padding-a-1 lrv-u-border-r-1@desktop">
+					{% include "@larva/modules/footer-social/footer-social.twig" with footer_social %}
+				</div>
+				<div class="lrv-u-border-r-1 lrv-u-border-color-grey lrv-u-padding-a-1 lrv-u-border-t-1 lrv-u-border-t-0@desktop lrv-u-border-r-1@desktop">
+					{% include "@larva/modules/footer-tip/footer-tip.twig" with footer_tip %}
+				</div>
+				<div class="lrv-u-border-r-1 lrv-u-border-color-grey lrv-u-padding-a-1 lrv-u-border-t-1 lrv-u-border-t-0@desktop">
+					{% include "@larva/modules/footer-newsletter/footer-newsletter.twig" with footer_newsletter %}
+				</div>
+			</div>
+
+		{% endif %}
+
+	</div>
+</footer>

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/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.