@penskemediacorp/larva-patterns 1.28.0 → 1.28.1-alpha.141

package/modules/how-we-test-products/how-we-test-products.prototype.js

@@ -0,0 +1,50 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_title = clonedeep( require( '@penskemediacorp/larva-patterns/components/c-title/c-title.prototype.js' ) );
+const c_dek = clonedeep( require( '@penskemediacorp/larva-patterns/components/c-dek/c-dek.prototype.js' ) );
+const story_card = clonedeep( require( '@penskemediacorp/larva-patterns/modules/story/story.prototype.js' ) );
+
+c_title.c_title_classes = 'lrv-a-font-primary-l lrv-u-color-black';
+c_title.c_title_text = 'How We Test Products';
+c_title.c_title_url = false;
+
+c_dek.c_dek_classes = 'lrv-a-font-secondary-l';
+c_dek.c_dek_markup = 'Our journalists test hundreds of products every year for readers. We’ve developed a rigorous system for reviewing products objectively. Learn More ⇢.'
+c_dek.c_dek_text = false;
+
+story_card.c_span = false;
+story_card.c_title.c_title_url = false;
+story_card.c_title.c_title_classes = 'lrv-a-font-secondary-xl lrv-u-margin-b-050';
+story_card.c_title.c_title_text = '500+';
+story_card.c_timestamp = false;
+story_card.c_tagline_author = false;
+
+story_card.c_dek.c_dek_text = 'Products Tested';
+story_card.c_dek.c_dek_classes = 'lrv-u-margin-tb-00 lrv-u-font-family-primary lrv-u-font-size-16 lrv-u-color-brand-secondary';
+story_card.c_dek.c_dek_markup = false;
+
+story_card.story_classes = 'lrv-u-width-50p@mobile-max lrv-u-border-color-grey-light lrv-u-padding-tb-125@mobile-max lrv-u-width-75p@tablet lrv-u-margin-lr-auto';
+story_card.story_grid_classes = 'lrv-u-flex lrv-u-flex-direction-column lrv-u-height-100p lrv-u-justify-content-space-between';
+
+story_card.c_lazy_image.c_lazy_image_classes = 'lrv-u-margin-lr-auto';
+story_card.c_lazy_image.c_lazy_image_crop_class = '';
+story_card.c_lazy_image.c_lazy_image_img_classes = '';
+story_card.c_lazy_image.c_lazy_image_placeholder_url = 'https://farm5.staticflickr.com/4078/5441060528_31db7838ba_z.jpg';
+
+how_we_test_products_items = [
+	story_card,
+	story_card,
+	story_card,
+	story_card,
+];
+
+module.exports = {
+	how_we_test_products_classes: 'lrv-u-text-align-center lrv-u-background-color-grey-lightest lrv-u-margin-tb-2',
+	how_we_test_products_outer_classes: 'lrv-u-width-75p@tablet lrv-u-margin-lr-auto lrv-u-padding-a-2',
+	how_we_test_products_banner_classes: '',
+	how_we_test_products_title_classes: '',
+	how_we_test_products_items_classes: 'lrv-u-flex lrv-u-flex-wrap-wrap@mobile-max',
+	how_we_test_products_items: how_we_test_products_items,
+	c_title: c_title,
+	c_dek: c_dek
+};

package/modules/how-we-test-products/how-we-test-products.twig

@@ -0,0 +1,19 @@
+<div class="how-we-test-products // {{ how_we_test_products_classes }}">
+	<div class="how-we-test-products-outer // {{ how_we_test_products_outer_classes }}">
+		<div class="{{ how_we_test_products_banner_classes }}">
+			<div class="how-we-test-products-title {{ how_we_test_products_title_classes }}">
+				{% if c_title %}
+					{% include "@larva/components/c-title/c-title.twig" with c_title %}
+				{% endif %}
+				{% if c_dek %}
+					{% include "@larva/components/c-dek/c-dek.twig" with c_dek %}
+				{% endif %}
+			</div>
+		</div>
+		<div class="how-we-test-product-items-outer // {{ how_we_test_products_items_classes }}">
+			{% for item in how_we_test_products_items %}
+				{% include "@larva/modules/story/story.twig" with item %}
+			{% endfor %}
+		</div>
+	</div>
+<div>

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

@@ -42,8 +42,15 @@ o_email_capture_form.c_button.c_button_inner_classes =
 	'lrv-u-background-color-white lrv-u-padding-l-050';
 o_email_capture_form.c_button.c_button_text = 'Sign Up';
 
+const c_tagline_prototype = require( '../../components/c-tagline/c-tagline.prototype' );
+const c_tagline_terms = clonedeep( c_tagline_prototype );
+
+c_tagline_terms.c_tagline_classes = 'lrv-a-font-basic-xxs lrv-u-margin-t-050 lrv-a-children-link-decoration-underline';
+c_tagline_terms.c_tagline_text = false;
+
 module.exports = {
 	o_email_capture_form,
+	c_tagline_terms,
 	o_social_list,
 	social_heading,
 	mega_menu_subscribe,

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

@@ -1,8 +1,11 @@
 <footer class="mega-menu__footer // {{ mega_menu_footer_classes }} ">
 	<div class="mega-menu__footer-inner // {{ mega_menu_footer_inner_classes }} ">
-		<section class="mega-menu__footer-subscribe // {{ mega_menu_footer_subscribe_classes }} ">
-			{% include "@larva/modules/mega-menu-footer-subscribe/mega-menu-footer-subscribe.twig" with mega_menu_subscribe %}
-		</section>
+
+		{% if mega_menu_subscribe %}
+			<section class="mega-menu__footer-subscribe // {{ mega_menu_footer_subscribe_classes }} ">
+				{% include "@larva/modules/mega-menu-footer-subscribe/mega-menu-footer-subscribe.twig" with mega_menu_subscribe %}
+			</section>
+		{% endif %}
 		<section class="mega-menu__footer-social // {{ mega_menu_footer_social_classes }} ">
 			{% include "@larva/modules/heading/heading.twig" with social_heading %}
 			<div class="mega-menu__social-list // {{ mega_menu_social_list_classes }}">
@@ -11,9 +14,28 @@
 		</section>
 		<section class="mega-menu__footer-form // {{ mega_menu_footer_form_classes }} ">
 			{% include "@larva/modules/heading/heading.twig" with newsletter_heading %}
-			<div class="lrv-u-flex-grow-1 lrv-u-width-100p">
+			<div class="lrv-u-flex-grow-1 lrv-u-width-100p {{ mega_menu_email_capture_form_classes }}">
 				{% include "@larva/objects/o-email-capture-form/o-email-capture-form.twig" with o_email_capture_form %}
+
+				{% if c_tagline_terms %}
+					{% include "@larva/components/c-tagline/c-tagline.twig" with c_tagline_terms %}
+				{% endif %}
 			</div>
 		</section>
 	</div>
+
+	<div class="mega-menu__footer-secondary // {{ mega_menu_footer_secondary_classes }}" >
+		{% if o_nav %}
+			<div class="mega-menu__footer-nav // {{ mega_menu_footer_nav_outer_classes }} ">
+				{% include "@larva/objects/o-nav/o-nav.twig" with o_nav %}
+			</div>
+		{% endif %}
+
+		{% if c_icon %}
+			<div class="mega-menu__footer-copyright // {{ mega_menu_footer_copyright_outer_classes }} ">
+				{% include "@larva/components/c-icon/c-icon.twig" with c_icon %}
+				<small class="mega-menu__footer-copyright-text {{ mega_menu_footer_copyright_textclasses_classes }}">{{ mega_menu_footer_copyright_text }}</small>
+			</div>
+		{% endif %}
+	</div>
 </footer>

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

@@ -1,9 +1,15 @@
-<li class="mega-menu-item // mega-menu__parent-list-item {{ mega_menu_item_classes }} ">
+<li class="mega-menu-item // mega-menu__parent-list-item {{ mega_menu_item_classes }} " data-collapsible="collapsed" >
 	<div class="mega-menu__item-link // {{ mega_menu_item_link_classes }} ">
 		{% include "@larva/components/c-link/c-link.twig" with c_link %}
+
+		{% if c_icon %}
+			<button class="mega_menu__item-button // {{ mega_menu_item_button_classes }}" data-collapsible-toggle="always-show">
+				{% include "@larva/components/c-icon/c-icon.twig" with c_icon %}
+			</button>
+		{% endif %}
 	</div>
 
-	<ul class="mega-menu__child-list // {{ mega_menu_child_list_classes }} ">
+	<ul class="mega-menu__child-list // {{ mega_menu_child_list_classes }} " data-collapsible-panel="" data-collapsible-breakpoint="mobile-only">
 		{% for item in mega_menu_item_children %}
 			<li class="mega-menu__child-list-item ">
 				{% include "@larva/components/c-link/c-link.twig" with item %}

package/modules/multiple-products/multiple-products.prototype.js

@@ -0,0 +1,20 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_title = clonedeep( require( '@penskemediacorp/larva-patterns/components/c-title/c-title.prototype' ) );
+const multiple_products_item = clonedeep(
+	require( '@penskemediacorp/larva-patterns/objects/o-multiple-product-item/o-multiple-product-item.prototype' )
+);
+
+c_title.c_title_classes = 'lrv-u-text-align-center lrv-u-padding-tb-075 lrv-u-border-t-1 lrv-u-border-b-1 lrv-u-font-size-28';
+c_title.c_title_text = 'Our Top Picks';
+
+const multiple_products_items = [
+	multiple_products_item,
+	multiple_products_item,
+	multiple_products_item,
+];
+
+module.exports = {
+	c_title,
+	multiple_products_items,
+};

package/modules/multiple-products/multiple-products.twig

@@ -0,0 +1,14 @@
+<div class="multiple-products // {{ multiple_products_classes }}">
+	<div class="{{ multiple_products_wrapper_classes }}">
+		<div class="multiple-products-title {{ multiple_products_title_classes }}">
+			{% if c_title %}
+				{% include "@larva/components/c-title/c-title.twig" with c_title %}
+			{% endif %}
+		</div>
+		<div class="multiple-products-data-wrapper {{ multiple_products_data_wrapper_classes }}">
+			{% for item in multiple_products_items %}
+				{% include "@larva/objects/o-multiple-product-item/o-multiple-product-item.twig" with item %}
+			{% endfor %}
+		</div>
+	</div>
+</div>

package/modules/newsletter/newsletter.prototype.js

@@ -35,7 +35,7 @@ o_email_capture_form.c_email_field.c_email_field_label_classes =
 	'lrv-a-screen-reader-only';
 o_email_capture_form.c_email_field.c_email_field_label_text = 'Email Address';
 
-c_tagline_terms.c_tagline_classes = 'lrv-u-margin-t-1';
+c_tagline_terms.c_tagline_classes = 'lrv-u-margin-t-1 lrv-a-font-basic-xxs lrv-a-children-link-decoration-underline';
 c_tagline_terms.c_tagline_text = false;
 c_tagline_terms.c_tagline_markup =
 	'By subscribing, I agree to the <a href="#">Terms of Use</a> and <a href="#">Privacy Policy</a>.';

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

@@ -23,6 +23,7 @@ c_button.c_button_classes +=
 module.exports = {
 	newsletter_cta_classes:
 		'lrv-u-margin-tb-125 lrv-u-margin-tb-150@desktop-xl lrv-u-padding-tb-2 lrv-u-flex lrv-u-justify-content-space-between lrv-u-border-t-1 lrv-u-border-b-1 lrv-u-align-items-center lrv-u-flex-direction-column@mobile-max lrv-u-padding-a-2@mobile-max',
+	newsletter_cta_inner_classes: 'lrv-u-text-align-center@mobile-max',
 	c_heading,
 	c_tagline,
 	c_button,

package/modules/newsletter-cta/newsletter-cta.twig

@@ -1,6 +1,6 @@
 <div class="newsletter-cta">
 	<div class="{{ newsletter_cta_classes }}">
-		<div class="lrv-u-text-align-center@mobile-max">
+		<div class="{{newsletter_cta_inner_classes}}">
 			{% if c_logo %}
 				{% include "@larva/components/c-logo/c-logo.twig" with c_logo %}
 			{% endif %}

package/modules/newswire/newswire.prototype.js

@@ -41,6 +41,7 @@ o_card.c_span = c_span;
 o_card.c_title = c_title;
 o_card.c_timestamp = c_timestamp;
 o_card.c_svg = c_svg;
+o_card.o_card_link_rel_attribute = 'nofollow';
 
 module.exports = {
 	newswire_classes: 'lrv-a-wrapper lrv-u-padding-b-2',

package/modules/page-404/page-404.smart.js

@@ -0,0 +1,60 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_heading_prototype = require( '@penskemediacorp/larva-patterns/components/c-heading/c-heading.prototype' );
+const c_svg_prototype = require( '../../components/c-svg/c-svg.prototype.js' );
+const c_title_prototype = require( '@penskemediacorp/larva-patterns/components/c-title/c-title.prototype' );
+const c_tagline_prototype = require( '@penskemediacorp/larva-patterns/components/c-tagline/c-tagline.prototype' );
+const suggested_link_items_prototype = require( '@penskemediacorp/larva-patterns/modules/list/list.prototype' );
+const search_form_prototype = require( '@penskemediacorp/larva-patterns/modules/search-form/search-form.prototype' );
+
+const c_heading = clonedeep( c_heading_prototype );
+const c_suggestion_title = clonedeep( c_title_prototype );
+const c_search_title = clonedeep( c_title_prototype );
+const c_svg = clonedeep( c_svg_prototype );
+const c_title = clonedeep( c_title_prototype );
+const c_tagline = clonedeep( c_tagline_prototype );
+const suggested_link_items = clonedeep( suggested_link_items_prototype );
+const search_form = clonedeep( search_form_prototype );
+
+c_heading.c_heading_classes = 'lrv-a-screen-reader-only';
+c_heading.c_heading_is_primary_heading = true;
+c_heading.c_heading_text = '404';
+
+c_svg.c_svg_name = 'logo-404';
+c_svg.c_svg_classes = 'lrv-u-max-width-100p';
+
+c_title.c_title_text = 'OOPS! Something went wrong here!';
+c_title.c_title_classes = 'lrv-a-font-secondary-l lrv-u-text-transform-uppercase lrv-u-margin-b-125';
+c_title.c_title_url = false;
+
+c_suggestion_title.c_title_classes = 'lrv-u-text-align-left lrv-u-margin-b-075';
+c_suggestion_title.c_title_text = 'Here are some suggestions that might be the page you were looking for:';
+c_suggestion_title.c_title_url = false;
+
+suggested_link_items.list_classes = 'lrv-u-text-align-left lrv-u-padding-b-1';
+suggested_link_items.list_items = [
+	{ list_markup: 'item_one' },
+	{ list_markup: 'item_two' },
+];
+
+c_search_title.c_title_classes = 'lrv-u-text-align-left';
+c_search_title.c_title_text = 'Or try searching for it here...';
+c_search_title.c_title_url = false;
+
+search_form.search_form_classes = 'lrv-u-text-align-left lrv-u-margin-t-1 lrv-u-display-inline-flex lrv-u-width-100p search-form-404';
+search_form.search_form_input_classes = 'lrv-u-border-a-1 lrv-u-width-100p';
+search_form.search_form_action_url = '/?s=';
+
+module.exports = {
+	c_heading,
+	c_suggestion_title,
+	c_search_title,
+	c_svg,
+	c_tagline,
+	c_title,
+	page_404_inner_classes: 'lrv-u-margin-lr-auto lrv-u-padding-lr-1',
+	search_form,
+	suggested_link_items,
+	wrapper_classes:
+		'lrv-u-text-align-center lrv-u-padding-t-1 lrv-u-padding-b-2 lrv-u-margin-b-2 lrv-u-max-width-830 lrv-u-margin-lr-auto',
+};

package/modules/page-404/page-404.twig

@@ -28,5 +28,21 @@
 
 		</div>
 
+		{% if c_suggestion_title %}
+			{% include "@larva/components/c-title/c-title.twig" with c_suggestion_title %}
+		{% endif %}
+
+		{% if suggested_link_items %}
+			{% include "@larva/modules/list/list.twig" with suggested_link_items %}
+		{% endif %}
+
+		{% if c_search_title %}
+			{% include "@larva/components/c-title/c-title.twig" with c_search_title %}
+		{% endif %}
+
+		{% if search_form %}
+			{% include "@larva/modules/search-form/search-form.twig" with search_form %}
+		{% endif %}
+
 	</div>
 </section>

package/modules/paragraph/paragraph.prototype.js

@@ -4,5 +4,6 @@ module.exports = {
 	paragraph_text_align_class: '',
 	paragraph_color_class: '',
 	paragraph_background_color_class: '',
+	paragraph_animation_class: '',
 	paragraph_markup: 'Paragraph Text.',
 };

package/modules/paragraph/paragraph.twig

@@ -1,3 +1,8 @@
-<p class="paragraph larva // {{ paragraph_classes }} {{ paragraph_typography_class }} {{ paragraph_text_align_class }} {{ paragraph_color_class }} {{ paragraph_background_color_class }}">
+<p
+	{% if paragraph_id_attr %}
+		id="{{ paragraph_id_attr }}"
+	{% endif %}
+	class="paragraph larva // {{ paragraph_classes }} {{ paragraph_animation_class }} {{ paragraph_typography_class }} {{ paragraph_text_align_class }} {{ paragraph_color_class }} {{ paragraph_background_color_class }}"
+>
 	{{ paragraph_markup|raw }}
 </p>

package/modules/post-content-image/post-content-image.twig

@@ -1,3 +1,3 @@
-<div class="post-content-image // {{ post_content_image_classes }}">
+<div class="post-content-image // {{ post_content_image_classes }} {{ post_content_image_animation_class }}">
 	{% include "@larva/objects/o-figure/o-figure.twig" with o_figure %}
 </div>

package/modules/product-card/product-card.prototype.js

@@ -0,0 +1,41 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_lazy_image = clonedeep( require( '../../components/c-lazy-image/c-lazy-image.prototype' ) );
+const c_figcaption = clonedeep( require( '../../components/c-figcaption/c-figcaption.prototype' ) );
+const c_title = clonedeep( require( '../../components/c-title/c-title.prototype' ) );
+const c_tagline = clonedeep( require( '../../components/c-tagline/c-tagline.prototype' ) );
+const c_button = clonedeep( require( '../../components/c-button/c-button.prototype' ) );
+const c_dek = clonedeep( require( '../../components/c-dek/c-dek.prototype' ) );
+
+c_figcaption.c_figcaption_caption_markup = false;
+c_figcaption.c_figcaption_credit_text_markup = 'Courtesy of Nordic Track';
+c_figcaption.c_figcaption_classes = 'lrv-u-flex lrv-u-justify-content-end lrv-u-margin-t-025 lrv-u-color-grey-dark lrv-u-text-transform-uppercase lrv-a-font-basic-xxs';
+
+c_title.c_title_text = 'NordicTrack Commercial S22i Studio Cycle';
+c_title.c_title_classes = 'lrv-a-font-primary-xxl lrv-u-margin-t-1 lrv-u-margin-t-075@mobile-max lrv-a-unstyle-inner-links';
+c_title.c_title_url = '';
+
+c_tagline.c_tagline_text = 'Powerful, iFit ready, and priced right!';
+c_tagline.c_tagline_classes = 'lrv-a-font-body-xxl lrv-u-margin-t-125 lrv-u-margin-b-00';
+
+c_button.c_button_classes = 'lrv-u-margin-t-125 lrv-a-font-basic-m lrv-a-unstyle-link lrv-u-display-block';
+c_button.c_button_inner_classes = 'lrv-u-border-b-2 lrv-u-border-t-2 lrv-u-border-l-1 lrv-u-border-r-1 lrv-u-padding-tb-050 lrv-u-text-transform-uppercase lrv-a-icon lrv-a-icon-before lrv-u-align-items-start lrv-u-padding-lr-050 lrv-u-background-color-brand-primary:hover';
+c_button.c_button_text = 'Subscribe $65.99';
+c_button.c_button_url = '#';
+c_button.product_card_price_outside = false;
+
+const buy_now_buttons = [ c_button, c_button ];
+
+c_dek.c_dek_text = false;
+c_dek.c_dek_markup = 'NordicTrack went a similar route as Bowflex with their S22i cycle.Instead of the regular fixed position, the S22i can adjust for incline (up to 20%) and decline (down to -10%) for a more realistic ride and better muscle engagement. The kicker with this feature is that trainers can digitally adjust your bike’s incline/decline in real-time during a live class. The S22i’s construction is top-quality with a steel frame and a solid 32-pound flywheel. The bike also uses NordicTrack’s SMR Silent Magnetic Resistance system which improves fluidity while making the bike quieter as well. NordicTrack offers both live, studio-like classes as well as a library of on-demand sessions through their iFit membership. You also get off-bike exercises including strength training, meditation and mindfulness sessions with a swivel of the screen. This iFit service has somewhat of a leg up on other brands because you get a whole year free to test it out. The classes, along with a swath of exercise metrics, are shown on a large, crisp 22-inch display. Among these stats is heart rate, which the bike measures via hand pulse sensors or a separate Bluetooth-connected monitor.';
+c_dek.c_dek_classes = 'lrv-u-order-100 lrv-u-margin-t-125 lrv-u-margin-t-2@mobile-max lrv-a-font-body-xxl lrv-u-margin-b-050';
+
+module.exports = {
+    product_card_wrapper_classes: 'lrv-u-padding-tb-125',
+	c_lazy_image,
+    c_figcaption,
+    c_title,
+    c_tagline,
+    buy_now_buttons,
+    c_dek,
+};

package/modules/product-card/product-card.twig

@@ -0,0 +1,57 @@
+<div class="product-card // {{ product_card_classes }}">
+	<div class="product-card-inner-wrapper // {{ product_card_wrapper_classes }}">
+		<div class="product-card-image-wrapper // {{ product_card_image_classes }}">
+			{% if best_deal_icon %}
+				{% include "@larva/components/c-svg/c-svg.twig" with best_deal_icon %}
+			{% endif %}
+
+			{% if c_lazy_image %}
+				{% include "@larva/components/c-lazy-image/c-lazy-image.twig" with c_lazy_image %}
+			{% endif %}
+
+			{% if c_figcaption %}
+				{% include "@larva/components/c-figcaption/c-figcaption.twig" with c_figcaption %}
+			{% endif %}
+		</div>
+		<div class="product-card-content-wrapper // {{ product_card_details_classes }}">
+			{% if article_kicker %}
+				{% include "@larva/modules/article-kicker/article-kicker.twig" with article_kicker %}
+			{% endif %}
+
+			{% if c_title %}
+				{% include "@larva/components/c-title/c-title.twig" with c_title %}
+			{% endif %}
+
+			{% if c_tagline %}
+				{% include "@larva/components/c-tagline/c-tagline.twig" with c_tagline %}
+			{% endif %}
+
+			<div class="buy-now-buttons {{ product_card_buy_now_buttons_classes }}">
+				{% if buy_now_buttons %}
+					{% for c_button in buy_now_buttons %}
+						<div class="{{ product_card_buy_now_button_wrapper_classes }}">
+							{% if c_button['product_card_price_outside'] %}
+								<p class="{{ product_card_price_outside_classes }}">
+									{% if c_button['current_price'] %}
+										{% include "@larva/components/c-span/c-span.twig" with c_button['current_price'] %}
+									{% endif %}
+									{% if c_button['original_price'] %}
+										{% include "@larva/components/c-span/c-span.twig" with c_button['original_price'] %}
+									{% endif %}
+									{% if c_button['discount'] %}
+										{% include "@larva/components/c-span/c-span.twig" with c_button['discount'] %}
+									{% endif %}	
+								</p>
+							{% endif %}
+							{% include "@larva/components/c-button/c-button.twig" with c_button %}
+						</div>		
+					{% endfor %}
+				{% endif %}
+			</div>
+
+			{% if c_dek %}
+				{% include "@larva/components/c-dek/c-dek.twig" with c_dek %}
+			{% endif %}
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,46 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_title = clonedeep(
+	require( '@penskemediacorp/larva-patterns/components/c-title/c-title.prototype.js' )
+);
+
+const o_product_card = clonedeep(
+	require( '../../objects/o-product-card/o-product-card.prototype' )
+);
+
+const o_product_card_primary = clonedeep(
+	require( '../../objects/o-product-card/o-product-card.primary' )
+);
+
+const product_grid_header_verdict_text = 'Verdict';
+const product_grid_header_pros_text = 'Pros';
+const product_grid_header_cons_text = 'Cons';
+
+o_product_card.o_product_card_classes = 'lrv-u-border-a-1@mobile-max lrv-u-border-color-grey-light lrv-u-width-100p';
+o_product_card.o_product_card_link_classes =
+	'lrv-a-unstyle-link lrv-u-display-block lrv-a-children-border-vertical lrv-a-children-border--grey-light lrv-u-height-100p lrv-u-flex lrv-u-flex-direction-column';
+
+o_product_card.product_grid_header_verdict_text =
+	product_grid_header_verdict_text;
+o_product_card.product_grid_header_pros_text =
+	product_grid_header_pros_text;
+o_product_card.product_grid_header_cons_text =
+	product_grid_header_cons_text;
+
+o_product_card_primary.o_product_card_classes += ' lrv-u-border-a-1@mobile-max lrv-u-border-color-grey-light';
+o_product_card_primary.o_product_card_link_classes +=
+	' lrv-a-unstyle-link lrv-u-display-block lrv-a-children-border-vertical lrv-a-children-border--grey-light lrv-u-height-100p lrv-u-flex lrv-u-flex-direction-column';
+
+module.exports = {
+	product_grid_classes:
+		'lrv-u-margin-tb-2 lrv-u-flex@desktop lrv-a-children-border-horizontal lrv-a-children-border--grey-light lrv-u-border-a-1@desktop lrv-u-border-color-grey-light lrv-a-space-children--3 lrv-a-space-children-vertical@mobile-max',
+	product_grid_items: [
+		o_product_card,
+		o_product_card_primary,
+		o_product_card,
+		o_product_card,
+	],
+	product_grid_header_verdict_text,
+	product_grid_header_pros_text,
+	product_grid_header_cons_text,
+};

package/modules/product-grid/product-grid.twig

@@ -0,0 +1,21 @@
+<div class="product-grid {{product_grid_classes}}">
+	<div class="product-grid__header lrv-a-children-border-vertical lrv-u-flex lrv-u-flex-direction-column lrv-a-hidden@desktop-max">
+		<div class="product-grid__header-details lrv-u-flex-grow-1">
+			{{product_grid_header_details_text}}
+		</div>
+		<div class="product-grid__header-verdict best-of-verdict lrv-u-padding-lr-1 lrv-u-padding-t-1 lrv-a-font-secondary-m">
+			{{product_grid_header_verdict_text}}
+		</div>
+		<div class="product-grid__header-pros best-of-pros lrv-u-padding-lr-1 lrv-u-padding-t-1 lrv-a-font-secondary-m">
+			{{product_grid_header_pros_text}}
+		</div>
+		<div class="product-grid__header-cons best-of-cons lrv-u-padding-lr-1 lrv-u-padding-t-1 lrv-a-font-secondary-m">
+			{{product_grid_header_cons_text}}
+		</div>
+	</div>
+	{% if product_grid_items %}
+		{% for item in product_grid_items %}
+			{% include "@larva/objects/o-product-card/o-product-card.twig" with item %}
+		{% endfor %}
+	{% endif %}
+</div>

package/modules/pros-and-cons/pros-and-cons.prototype.js

@@ -0,0 +1,15 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_heading = clonedeep( require( '../../components/c-heading/c-heading.prototype' ) );
+const list_markup = '<ul><li>List Item</li></ul>';
+
+const item = {
+	c_heading,
+	list_markup
+}
+
+module.exports = {
+	pros_and_cons_classes: 'lrv-u-flex lrv-u-border-a-1 lrv-a-children-border-horizontal',
+	pros_and_cons_inner_classes: 'lrv-u-padding-a-1 lrv-u-width-50p',
+	items: [ item, item ]
+}

package/modules/pros-and-cons/pros-and-cons.twig

@@ -0,0 +1,12 @@
+<div class="pros-and-cons {{pros_and_cons_classes}}">
+	{% for item in items %}
+		<div class="pros-and-cons__inner {{pros_and_cons_inner_classes}}" >
+			{% if item['c_heading'] %}
+				{% include "@larva/components/c-heading/c-heading.twig" with item['c_heading'] %}
+			{% endif %}
+			{% if item['list_markup'] %}
+				{{item['list_markup']|raw}}
+			{% endif %}
+		</div>
+	{% endfor %}
+</div>

package/modules/section-heading/section-heading.h2.js

@@ -3,7 +3,7 @@ const clonedeep = require( 'lodash.clonedeep' );
 const section_heading = clonedeep( require( './section-heading.prototype' ) );
 
 section_heading.section_heading_class =
-	'lrv-u-margin-lr-auto lrv-u-width-75p lrv-u-border-t-3 lrv-u-padding-t-1';
+	'lrv-u-margin-lr-auto lrv-u-border-t-3 lrv-u-padding-t-050';
 section_heading.c_dek = false;
 
 module.exports = section_heading;

package/modules/section-heading/section-heading.h3.js

@@ -3,7 +3,7 @@ const clonedeep = require( 'lodash.clonedeep' );
 const section_heading = clonedeep( require( './section-heading.prototype' ) );
 
 section_heading.section_heading_class =
-	'lrv-u-margin-lr-auto lrv-u-width-75p lrv-u-border-t-3 lrv-u-padding-t-1';
+	'lrv-u-margin-lr-auto lrv-u-border-t-3 lrv-u-padding-t-050';
 section_heading.section_heading_level_text = '3';
 section_heading.section_heading_typography_class = 'lrv-a-font-secondary-xl';
 section_heading.c_dek = false;

package/modules/separator/separator.prototype.js

@@ -1,4 +1,5 @@
 module.exports = {
 	separator_classes: 'lrv-u-border-a-1',
 	separator_border_color_class: '',
+	separator_thickness_class: '',
 };

package/modules/separator/separator.twig

@@ -1 +1 @@
-<hr class="separator larva // {{ separator_classes }} {{ separator_border_color_class }}" />
+<hr class="separator larva // {{ separator_classes }} {{ separator_border_color_class }} {{ separator_thickness_class }}" />

package/modules/table-of-contents/table-of-contents.prototype.js

@@ -0,0 +1,38 @@
+const clonedeep = require('lodash.clonedeep');
+
+const c_heading = clonedeep( require( '@penskemediacorp/larva-patterns/components/c-heading/c-heading.prototype' ) );
+const c_nav_link = clonedeep( require( '@penskemediacorp/larva-patterns/components/c-nav-link/c-nav-link.prototype' ) );
+
+
+c_heading.c_heading_classes = 'lrv-a-font-primary-l u-font-size-25 lrv-u-padding-b-075 lrv-u-border-b-1';
+
+c_nav_link.c_nav_link_markup = 'Moon Landing on July 21,1968';
+c_nav_link.c_nav_link_title_attr = 'Moon Landing on July 21,1968';
+c_nav_link.c_nav_link_url = '#';
+c_nav_link.c_nav_link_text = false;
+
+const toc_list_items = [
+	c_nav_link,
+	c_nav_link,
+	c_nav_link,
+	c_nav_link,
+	c_nav_link,
+];
+
+const toc_mobile_list_items = toc_list_items;
+
+module.exports = {
+	toc_classes: 'lrv-u-border-a-1 lrv-u-padding-a-1 lrv-u-margin-b-1',
+	toc_navigation_classes: 'lrv-js-MobileHeightToggle',
+	toc_list_classes: 'lrv-js-MobileHeightToggle-target lrv-u-color-brand-secondary a-font-theme-secondary-medium-xs lrv-a-unstyle-list lrv-a-grid lrv-a-cols2@desktop u-grid-row-gap-0 u-grid-gap-1 lrv-u-padding-t-050',
+	toc_mobile_list_classes: 'lrv-a-hidden@desktop lrv-u-color-brand-secondary a-font-theme-secondary-medium-xs lrv-a-unstyle-list lrv-a-grid  u-grid-row-gap-0 lrv-u-padding-t-050',
+	toc_list_item_outer_classes: 'lrv-u-line-height-large lrv-u-width-100p',
+	toc_mobile_list_item_outer_classes: 'lrv-u-line-height-large lrv-u-width-100p',
+	toc_navigation_anchor_classes: 'lrv-u-display-block lrv-u-whitespace-nowrap lrv-u-overflow-hidden',
+	nav_title_text: 'View More',
+	nav_title_outer_classes: 'lrv-a-hidden@desktop a-heading-border lrv-u-text-align-center',
+	nav_title_classes: 'lrv-js-MobileHeightToggle-trigger lrv-u-background-color-white lrv-u-font-weight-normal lrv-u-padding-a-050 lrv-u-justify-content-center lrv-u-text-transform-capitalize',
+	toc_list_items: toc_list_items,
+	c_heading: c_heading,
+	toc_mobile_list_items: toc_mobile_list_items,
+}