@penskemediacorp/larva-patterns 1.33.0 → 1.35.0

package/components/c-nav-link/c-nav-link.twig

@@ -2,8 +2,14 @@
 	{% if c_nav_link_aria_current_attr %}
 		aria-current="{{ c_nav_link_aria_current_attr }}"
 	{% endif %}
+	{% if c_nav_link_title_attr %}
+		title="{{ c_nav_link_title_attr }}"
+	{% endif %}
 >
 	{{ c_nav_link_text }}
+	{% if c_nav_link_markup %}
+		{{ c_nav_link_markup }}
+	{% endif %}
 	{% if c_nav_link_screen_reader_text %}
 	<span class="lrv-a-screen-reader-only">{{ c_nav_link_screen_reader_text }}</span>
 	{% endif %}

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/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,
+}

package/modules/table-of-contents/table-of-contents.twig

@@ -0,0 +1,44 @@
+<div class="toc // {{ toc_classes }}" >
+
+	{% if c_heading %}
+		{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
+	{% endif %}
+
+	<nav class="toc-navigation // {{ toc_navigation_classes }}"
+		{% if nav_title_id_attr %}
+			aria-label="{{ nav_title_id_attr }}"
+		{% endif %}
+		{% if nav_list_labelledby_attr %}
+			aria-labelledby="{{ nav_list_labelledby_attr }}"
+		{% endif %}
+	>
+
+		<ul class="toc-list // {{ toc_list_classes }}">
+			{% for item in toc_list_items %}
+				<li class="toc-list-item // {{ toc_list_item_outer_classes }}">
+					{% include "@larva/components/c-nav-link/c-nav-link.twig" with item %}
+				</li>
+			{% endfor %}
+		</ul>
+
+		{% if toc_mobile_list_items %}
+			<ul class="toc-list-mobile // {{ toc_mobile_list_classes }}">
+				{% for item in toc_mobile_list_items %}
+					<li class="toc-list-item // {{ toc_mobile_list_item_outer_classes }}">
+						{% include "@larva/components/c-nav-link/c-nav-link.twig" with item %}
+					</li>
+				{% endfor %}
+			</ul>
+		{% endif %}
+
+		{% if nav_title_text %}
+			{% if nav_title_outer_classes %}
+				<div class="nav__title-outer {{ nav_title_outer_classes }}">
+			{% endif %}
+					<h4 id="{{ nav_title_id_attr }}" class="nav__title {{ nav_title_classes }}">{{ nav_title_text }}</h4>
+			{% if nav_title_outer_classes %}
+				</div>
+			{% endif %}
+		{% endif %}
+	</nav>
+</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.33.0",
+  "version": "1.35.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.33.0",
-    "@penskemediacorp/larva-js": "^1.33.0",
+    "@penskemediacorp/larva-css": "^1.35.0",
+    "@penskemediacorp/larva-js": "^1.35.0",
     "@penskemediacorp/larva-svg": "^1.28.0",
     "lodash.clonedeep": "^4.5.0"
   },
-  "gitHead": "dba52a87b14d01560a5ee54c024e44ef33634f75"
+  "gitHead": "ee8e6d25de6617a4b38de5cf351bccc16497d31a"
 }