@penskemediacorp/larva-patterns 1.32.0 → 1.34.0

package/modules/faq/faq.prototype.js

@@ -0,0 +1,30 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_title = clonedeep(
+	require( '@penskemediacorp/larva-patterns/components/c-title/c-title.prototype' )
+);
+
+const c_dek = clonedeep(
+	require( '@penskemediacorp/larva-patterns/components/c-dek/c-dek.prototype' )
+);
+
+const faq_item = clonedeep(
+	require( '@penskemediacorp/larva-patterns/objects/o-faq-item/o-faq-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';
+c_title.c_title_url = '';
+c_dek.c_dek_classes = 'lrv-u-padding-b-150 lrv-u-margin-t-150 lrv-u-border-b-1';
+
+const faq_items = [
+	faq_item,
+	faq_item,
+	faq_item,
+	faq_item,
+];
+
+module.exports = {
+	c_title,
+	c_dek,
+	faq_items,
+};

package/modules/faq/faq.twig

@@ -0,0 +1,18 @@
+<div class="faq // {{ faq_classes }}">
+		<div class="{{ faq_banner_classes }}">		
+			<div class="faq-title {{ faq_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="{{ faq_items_classes }}">
+			{% for item in faq_items %}
+				{% include "@larva/objects/o-faq-item/o-faq-item.twig" with item %}
+			{% endfor %}
+		</div>
+	</div>	
+<div>

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

@@ -6,9 +6,10 @@ const o_email_capture_form_minimal = clonedeep(
 const c_title = clonedeep(
 	require( '../../components/c-title/c-title.prototype' )
 );
-const c_tagline = clonedeep(
-	require( '../../components/c-tagline/c-tagline.prototype' )
-);
+
+const c_tagline_prototype = require( '../../components/c-tagline/c-tagline.prototype' );
+const c_tagline = clonedeep( c_tagline_prototype );
+const c_tagline_terms = clonedeep( c_tagline_prototype );
 
 c_title.c_title_url = false;
 c_title.c_title_text = 'Stay In The Know';
@@ -19,6 +20,8 @@ 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';
 
+c_tagline_terms.c_tagline_text = '';
+
 o_email_capture_form_minimal.c_button.c_button_classes += ' lrv-a-icon-invert';
 
 module.exports = {
@@ -26,5 +29,6 @@ module.exports = {
 		'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_tagline,
+	c_tagline_terms,
 	o_email_capture_form: o_email_capture_form_minimal,
 };

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/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/product-card/product-card.prototype.js

@@ -0,0 +1,40 @@
+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 = '#';
+
+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_wrapper_classes }}">
+		<div class="{{ 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_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 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/objects/o-faq-item/o-faq-item.prototype.js

@@ -0,0 +1,18 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_title = clonedeep(
+	require( '../../components/c-title/c-title.prototype' )
+);
+const c_dek = clonedeep(
+	require( '../../components/c-dek/c-dek.prototype' )
+);
+
+c_title.c_title_url = '';
+c_title.c_title_classes = 'lrv-u-margin-t-1 lrv-u-padding-b-1 lrv-u-border-b-1';
+
+module.exports = {	
+	modifier_class: '',
+	o_faq_item_classes: '',
+	c_title,
+	c_dek,
+};

package/objects/o-faq-item/o-faq-item.twig

@@ -0,0 +1,8 @@
+<div class="o-faq-item {{ modifier_class }} {{ o_faq_item_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>

package/package.json

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