@penskemediacorp/larva-patterns 1.5.6-alpha.0 → 1.6.1

package/modules/profile-related-stories/profile-related-stories.prototype.js

@@ -0,0 +1,33 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_heading = clonedeep( require( '../../components/c-heading/c-heading.prototype' ) );
+const o_card_list = clonedeep( require( '../../objects/o-card-list/o-card-list.prototype' ) );
+
+c_heading.c_heading_text = 'Related Stories';
+c_heading.c_heading_classes = 'lrv-u-font-family-secondary lrv-u-font-size-28 lrv-u-font-size-40@tablet lrv-u-font-size-46@desktop-xl lrv-u-padding-r-1';
+
+o_card_list.o_card_list_classes += ' lrv-a-grid a-cols3@tablet';
+
+o_card_list.o_card_list_items.map( ( o_card ) => {
+
+	o_card.o_card_classes = 'lrv-u-flex lrv-u-flex-direction-column@tablet';
+
+	o_card.c_lazy_image.c_lazy_image_classes = 'lrv-u-flex-shrink-0 lrv-u-margin-r-1 lrv-u-margin-r-00@tablet';
+	o_card.c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-3x2';
+
+	o_card.c_span.c_span_text = 'News';
+	o_card.c_span.c_span_classes += ' lrv-u-font-size-12@mobile-max lrv-u-font-family-primary lrv-u-font-weight-bold lrv-u-display-block lrv-u-padding-b-050';
+	o_card.c_span.c_span_url = '#';
+
+	o_card.c_title.c_title_text = 'Guggenheim’s Hilma af Klint Survey Is Most Popular Show in Its History';
+	o_card.c_title.c_title_classes = 'lrv-u-font-family-primary lrv-u-font-size-14@mobile-max lrv-u-font-size-16 lrv-u-font-weight-normal';
+	o_card.c_title.c_title_link_classes = 'lrv-u-color-black';
+
+	o_card.c_timestamp = false;
+} );
+
+module.exports = {
+	profile_related_stories_classes: '',
+	c_heading: c_heading,
+	o_card_list: o_card_list,
+};

package/modules/profile-related-stories/profile-related-stories.twig

@@ -0,0 +1,9 @@
+<div class="profile-related-stories // {{ profile_related_stories_classes }}">
+	{% if c_heading %}
+		{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
+	{% endif %}
+
+	{% if o_card_list %}
+		{% include "@larva/objects/o-card-list/o-card-list.twig" with o_card_list %}
+	{% endif %}
+</div>

package/modules/pullquote/pullquote.prototype.js

@@ -0,0 +1,8 @@
+module.exports = {
+	pullquote_classes: 'lrv-u-width-75p',
+	pullquote_typography_class: 'lrv-a-font-body-m',
+	pullquote_text_align_class: 'lrv-u-text-align-center',
+	pullquote_color_class: '',
+	pullquote_background_color_class: '',
+	pullquote_markup: 'Pullquote Text.',
+};

package/modules/pullquote/pullquote.twig

@@ -0,0 +1,3 @@
+<blockquote class="pullquote larva // {{ pullquote_classes }} {{ pullquote_typography_class }} {{ pullquote_text_align_class }} {{ pullquote_color_class }} {{ pullquote_background_color_class }}">
+	{{ pullquote_markup }}
+</blockquote>

package/modules/read-next/read-next.prototype.js

@@ -0,0 +1,20 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_span_prototype = require( '../../components/c-span/c-span.prototype' );
+const c_span = clonedeep(  c_span_prototype );
+
+c_span.c_span_text = 'Read Next: ';
+c_span.c_span_classes += ' lrv-u-text-transform-uppercase  lrv-u-font-weight-bold';
+
+const c_title_prototype = require( '../../components/c-title/c-title.prototype' );
+const c_title = clonedeep( c_title_prototype );
+
+c_title.c_title_classes = 'lrv-u-padding-l-1 lrv-u-max-width-500 lrv-a-truncate-ellipsis lrv-u-font-weight-normal';
+c_title.c_title_text = 'Here is some really long title text, it should be truncated with lrv-a-truncate-ellispis, we hope!!!!!! Wow it\'s so long.';
+c_title.c_title_link_classes = 'lrv-a-unstyle-link';
+
+module.exports = {
+	read_next_classes: ' lrv-a-hidden@desktop-max lrv-u-flex lrv-u-align-items-center lrv-u-flex-1 lrv-u-font-family-body lrv-u-font-size-16',
+	c_span: c_span,
+	c_title: c_title,
+};

package/modules/read-next/read-next.twig

@@ -0,0 +1,4 @@
+<aside class="read-next // {{ read_next_classes }}">
+	{% include "@larva/components/c-span/c-span.twig" with c_span %}
+	{% include "@larva/components/c-title/c-title.twig" with c_title %}
+</aside>

package/modules/search-form/search-form.prototype.js

@@ -0,0 +1,8 @@
+module.exports = {
+	search_form_classes: '',
+	search_form_action_url: '#',
+	search_form_is_swiftype: false,
+	search_form_input_classes: '',
+	search_form_input_placeholder_attr: 'Search',
+	search_form_submit_classes: '',
+};

package/modules/search-form/search-form.twig

@@ -0,0 +1,11 @@
+{% if search_form_is_swiftype %}
+	<div data-st-search-form="small_search_form"></div>
+{% else %}
+	<form class="search-form {{ search_form_classes }}" action="{{ search_form_action_url }}" role="search" method="get">
+		<label>
+			<span class="lrv-a-screen-reader-only">Search for:</span>
+			<input class="{{ search_form_input_classes }}" type="search" placeholder="{{ search_form_input_placeholder_attr }}" value="" name="s">
+		</label>
+		<input class="{{ search_form_submit_classes }}" type="submit" value="Search">
+	</form>
+{% endif %}

package/modules/secondary-stories/secondary-stories.prototype.js

@@ -0,0 +1,119 @@
+const clonedeep = require('lodash.clonedeep');
+
+const o_card_prototype = require('@penskemediacorp/larva-patterns/objects/o-card/o-card.prototype.js')
+
+const o_author = clonedeep(require('@penskemediacorp/larva-patterns/objects/o-author/o-author.prototype'));
+o_author.c_span.c_span_classes = '';
+o_author.o_author_classes = 'lrv-u-text-transform-uppercase'; 
+o_author.o_author_text= 'By ';
+o_author.c_timestamp= false;
+o_author.c_span.c_span_link_classes = 'lrv-a-unstyle-link';
+o_card_prototype.o_author = o_author;
+
+const c_dek = clonedeep(require('@penskemediacorp/larva-patterns/components/c-dek/c-dek.prototype.js'));
+o_card_prototype.c_dek = c_dek;
+
+o_card_prototype.c_span = false;
+o_card_prototype.c_title.c_title_text = ' For Sahbabii, Recording His Debut Album Was Part of The Grieving Process';
+o_card_prototype.c_timestamp = false;
+o_card_prototype.o_card_content_classes ='lrv-u-align-items-start lrv-u-flex lrv-u-flex-direction-column';
+o_card_prototype.c_title.c_title_link_classes = 'lrv-a-unstyle-link lrv-u-color-brand-primary:hover';
+
+const article_kicker = clonedeep(require('@penskemediacorp/larva-patterns/modules/article-kicker/article-kicker.prototype.js'));
+article_kicker.article_kicker_classes = 'lrv-u-padding-b-050 lrv-u-border-b-1 lrv-u-text-transform-uppercase';
+article_kicker.article_kicker_link_classes = 'lrv-a-unstyle-link';
+o_card_prototype.article_kicker_outer_classes = 'lrv-u-padding-tb-1@desktop-xl';
+o_card_prototype.article_kicker = article_kicker;
+
+const o_card_1 = clonedeep(o_card_prototype);
+o_card_1.c_dek = false;
+o_card_1.article_kicker.article_kicker_text = 'Exclusive';
+o_card_1.c_title.c_title_text = ' It Started With Thirst Traps on TikTok. Now, She’s Accused of Running a BDSM Cult';
+o_card_1.article_kicker_outer_classes = 'lrv-a-font-basic-l lrv-a-glue-parent lrv-u-background-color-white lrv-u-flex lrv-u-padding-b-1 lrv-u-padding-l-1@mobile-max lrv-u-padding-r-1 lrv-u-padding-t-1@desktop-xl lrv-u-padding-t-1@mobile-max lrv-u-text-transform-uppercase u-margin-t-n187@desktop-xl u-margin-t-n187@mobile-max u-z-index-middle-bottom';
+o_card_1.article_kicker.article_kicker_classes += ' lrv-a-font-basic-l';
+o_card_1.c_title.c_title_classes = 'lrv-a-font-primary-xl lrv-u-padding-t-150@mobile-max lrv-u-padding-b-1@mobile-max lrv-u-padding-t-050@tablet lrv-u-padding-b-075@tablet';
+o_card_1.o_author.o_author_classes = 'lrv-a-font-body-s lrv-u-text-transform-uppercase lrv-u-color-black';
+o_card_1.o_card_classes = 'lrv-u-flex@tablet lrv-u-flex-direction-column@desktop-xl';
+o_card_1.o_card_image_wrap_classes = 'lrv-u-flex-basis-100p@desktop-xl-max lrv-u-margin-r-175@tablet lrv-u-margin-r-00@desktop-xl';
+o_card_1.o_card_content_classes = 'lrv-u-align-items-start lrv-u-flex lrv-u-flex-basis-100p@desktop-xl-max lrv-u-flex-direction-column lrv-u-padding-l-150@mobile-max lrv-u-padding-r-150@mobile-max';
+o_card_1.c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-3x2';
+
+const o_card_2 = clonedeep(o_card_prototype);
+ 
+o_card_2.article_kicker.article_kicker_text = 'AMERICAN MILITIA';
+o_card_2.c_title.c_title_text = 'Meet the Oath Keeper on the NRA’s Board of Directors';
+o_card_2.c_dek.c_dek_text = ' Links between the notorious militia and the gun lobby run deep';
+o_card_2.c_dek.c_dek_classes = 'lrv-u-margin-tb-075@desktop-xl lrv-a-hidden@desktop-xl-max lrv-a-font-body-l lrv-a-truncate-ellipsis-5line';
+o_card_2.article_kicker.article_kicker_classes += ' lrv-a-font-basic-xs ';
+o_card_2.article_kicker_outer_classes = 'lrv-u-padding-b-075 lrv-u-padding-b-125@desktop-xl lrv-u-padding-t-1@desktop-xl';
+o_card_2.c_title.c_title_classes = 'lrv-u-padding-b-075@mobile-max lrv-a-font-primary-m lrv-u-padding-t-125@mobile-max';
+o_card_2.o_author.o_author_classes = 'lrv-a-font-body-xs lrv-u-text-transform-uppercase lrv-u-color-black';
+o_card_2.c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-1x1@desktop-xl-max lrv-a-crop-3x2@desktop-xl lrv-a-crop-3x2@mobile-max';
+o_card_2.c_lazy_image.c_lazy_image_classes = 'lrv-u-width-100p';
+o_card_2.o_card_classes ='lrv-u-margin-l-00@desktop-xl lrv-u-flex-basis-100p lrv-u-flex-direction-column@desktop-xl lrv-a-space-children--1 lrv-a-space-children--0@desktop-xl lrv-u-border-t-1@mobile-max lrv-u-padding-t-2@mobile-max lrv-a-space-children-horizontal@tablet lrv-u-flex@tablet';
+o_card_2.o_card_content_classes = 'lrv-u-align-items-start lrv-u-flex lrv-u-flex-direction-column lrv-u-padding-b-150@mobile-max lrv-u-padding-t-1@mobile-max';
+
+const o_card_3 = clonedeep(o_card_prototype);
+ 
+o_card_3.article_kicker.article_kicker_text = 'YACHT ROCK';
+o_card_3.c_title.c_title_text = 'Welcome to Jenny Lewis’ Yacht-Rock Era. It’s Nice Here';
+o_card_3.c_dek.c_dek_text = '“Puppy and a Truck” is all about the unconditional love that only a dog and a vehicle can provide';
+o_card_3.c_dek.c_dek_classes = 'lrv-u-margin-tb-075@desktop-xl lrv-a-hidden@desktop-xl-max lrv-a-font-body-l lrv-a-truncate-ellipsis-5line';
+o_card_3.article_kicker.article_kicker_classes += ' lrv-a-font-basic-xs ';
+o_card_3.article_kicker_outer_classes = 'lrv-u-padding-b-075 lrv-u-padding-b-125@desktop-xl lrv-u-padding-t-1@desktop-xl';
+o_card_3.c_title.c_title_classes = 'lrv-u-padding-b-075@mobile-max lrv-a-font-primary-m lrv-u-padding-t-125@mobile-max';
+o_card_3.o_author.o_author_classes = 'lrv-a-font-body-xs lrv-u-text-transform-uppercase lrv-u-color-black';
+o_card_3.c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-1x1@desktop-xl-max lrv-a-crop-3x2@desktop-xl lrv-a-crop-3x2@mobile-max';
+o_card_3.c_lazy_image.c_lazy_image_classes = 'lrv-u-width-100p';
+o_card_3.o_card_classes = 'lrv-a-space-children--1@desktop-xl-max lrv-a-space-children--2@desktop-xl lrv-a-space-children-horizontal  lrv-u-flex-basis-100p lrv-u-border-t-0@desktop-xl lrv-u-border-t-1@tablet lrv-u-flex-direction-column@desktop-xl lrv-u-flex@tablet lrv-u-margin-t-00@desktop-xl lrv-u-margin-t-150@tablet lrv-u-padding-t-00@desktop-xl lrv-u-padding-t-150@tablet';
+o_card_3.o_card_content_classes = 'lrv-u-margin-l-00@mobile-max lrv-u-margin-l-00@desktop-xl lrv-u-align-items-start lrv-u-flex lrv-u-flex-direction-column lrv-u-padding-b-150@mobile-max lrv-u-padding-t-1@mobile-max';
+ 
+const o_card_4 = clonedeep(o_card_prototype);
+
+o_card_4.c_dek = false;
+o_card_4.c_lazy_image = false;
+o_card_4.article_kicker_outer_classes = ' lrv-u-color-brand-primary lrv-u-display-inline';
+o_card_4.article_kicker.article_kicker_classes = ' lrv-a-font-primary-m article-kicker lrv-u-display-inline';
+o_card_4.c_title.c_title_classes = 'lrv-a-font-primary-m lrv-u-display-inline';
+o_card_4.c_title.c_title_link_classes = 'lrv-a-unstyle-link lrv-u-color-brand-primary:hover';
+o_card_4.o_author.o_author_classes = ' lrv-u-display-inline lrv-a-font-primary-m lrv-u-color-grey-light'; 
+o_card_4.o_card_content_classes ='';
+o_card_4.o_card_classes = ' lrv-u-flex-basis-40p lrv-u-margin-r-2@tablet lrv-u-border-t-1@mobile-max lrv-u-padding-t-2@mobile-max lrv-u-margin-t-175@desktop-xl lrv-u-padding-t-175@desktop-xl lrv-u-border-t-1@desktop-xl lrv-u-margin-r-00@desktop-xl lrv-u-border-t-1@desktop-xl';
+o_card_4.c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-3x2';
+
+const o_card_5 = clonedeep(o_card_1);
+
+o_card_5.article_kicker.article_kicker_text = 'INSIDE LOOK';
+o_card_5.c_title.c_title_text = '40 Watt Sun Raise the Emotional Stakes While Turning Down the Volume on New Chamber-Folk Epic';
+o_card_5.o_card_classes = 'lrv-u-padding-r-2@tablet lrv-u-padding-b-150@mobile-max lrv-u-flex-basis-50p lrv-u-border-r-1@tablet ';
+o_card_5.article_kicker_outer_classes = ' lrv-a-glue-parent lrv-u-background-color-white lrv-u-padding-b-1 lrv-u-padding-r-1 lrv-u-padding-t-1';
+o_card_5.article_kicker.article_kicker_classes += 'lrv-a-font-basic-xs ';
+o_card_5.o_card_content_classes = ' lrv-u-align-items-start lrv-u-flex lrv-u-flex-basis-100p@desktop-xl-max lrv-u-flex-direction-column lrv-u-padding-l-150@mobile-max lrv-u-padding-r-150@mobile-max';
+o_card_5.c_title.c_title_classes = 'lrv-u-padding-t-00@desktop-xl lrv-u-padding-b-075 lrv-u-padding-t-00@mobile-max lrv-a-font-primary-xl lrv-u-padding-t-025';
+o_card_5.o_card_image_wrap_classes = 'lrv-u-flex-basis-100p@desktop-xl-max  ';
+
+const o_card_6 = clonedeep(o_card_prototype);
+
+o_card_6.article_kicker.article_kicker_text = 'EXCLUSIVE';
+o_card_6.c_title.c_title_text = 'Marilyn Manson: The Monster Hiding in Plain Sight';
+o_card_6.c_dek.c_dek_text = 'He was a provocative media darling for decades. Offstage, exes allege, he was an abuser who made their lives hell. A Rolling Stone investigation based on court documents and more than 55 new interviews';
+o_card_6.c_lazy_image = false;
+o_card_6.c_dek.c_dek_classes = 'lrv-a-font-body-l lrv-a-truncate-ellipsis-5line lrv-u-margin-b-1@desktop-xl lrv-u-margin-t-075@desktop-xl lrv-u-margin-tb-075@mobile-max';
+o_card_6.article_kicker.article_kicker_classes += ' lrv-a-font-basic-l'; 
+o_card_6.article_kicker_outer_classes = 'lrv-u-padding-b-125@desktop-xl';
+o_card_6.c_title.c_title_classes = 'lrv-u-padding-t-1 lrv-a-font-primary-l lrv-u-padding-t-00@desktop-xl';
+o_card_6.o_author.o_author_classes = 'lrv-a-font-body-xs lrv-u-text-transform-uppercase lrv-u-color-black';
+o_card_6.o_card_classes = 'lrv-u-padding-l-2@tablet lrv-u-padding-l-150@mobile-max lrv-u-padding-r-150@mobile-max lrv-u-flex-basis-50p';
+o_card_6.o_card_content_classes = 'lrv-u-align-items-start lrv-u-border-b-1@mobile-max lrv-u-border-t-1@mobile-max lrv-u-flex lrv-u-flex-direction-column lrv-u-margin-b-2@mobile-max lrv-u-padding-b-2@mobile-max lrv-u-padding-t-2@mobile-max';
+
+module.exports = {
+	stories: [o_card_1, o_card_2, o_card_3, o_card_4, o_card_5, o_card_6],
+	secondary_stories_classes:'',
+	stories_content_primary_classes:'lrv-u-border-t-6',
+	stories_content_primary_inner_classes:'lrv-u-padding-b-150@tablet lrv-u-padding-b-3@desktop-xl lrv-u-margin-b-250@mobile-max lrv-u-padding-t-150@mobile-max lrv-u-padding-t-150@desktop-xl-max lrv-u-border-t-2 lrv-u-flex lrv-u-margin-t-025 lrv-a-space-children--3@desktop-xl lrv-a-space-children-horizontal lrv-u-flex-direction-column@desktop-xl-max lrv-u-padding-t-250@desktop-xl',
+	stories_card_primary_classes:' lrv-u-flex-basis-45p lrv-u-padding-b-150@desktop-xl-max',
+	stories_card_secondary_classes:' lrv-u-flex lrv-u-padding-l-150@mobile-max lrv-u-padding-r-150@mobile-max lrv-u-border-t-1@tablet lrv-u-padding-t-00@mobile-max lrv-u-flex-direction-column@mobile-max lrv-u-flex-direction-row-reverse@desktop-xl-max lrv-u-flex-basis-55p lrv-u-flex-direction-column@desktop-xl  lrv-u-padding-t-150@desktop-xl-max lrv-u-border-t-0@desktop-xl',
+	stories_card_secondary_inner_classes:'  lrv-u-flex-basis-60p lrv-u-padding-t-00@desktop-xl lrv-u-border-t-0@desktop-xl lrv-a-space-children--2@desktop-xl lrv-a-space-children-horizontal@desktop-xl lrv-u-flex lrv-u-flex-direction-column@desktop-xl-max',
+	stories_content_secondary_classes:'lrv-u-border-t-6',
+	stories_content_secondary_inner_classes:' lrv-u-padding-t-150@tablet lrv-u-border-t-2 lrv-u-flex@tablet lrv-u-margin-t-025 lrv-u-padding-t-150@mobile-max lrv-u-padding-tb-250@desktop-xl',
+};

package/modules/secondary-stories/secondary-stories.twig

@@ -0,0 +1,22 @@
+<section class="secondary-stories {{ secondary_stories_classes }}">
+	<div class="stories-content-primary // {{ stories_content_primary_classes }} ">
+		<div class="stories-content-primary-inner // {{ stories_content_primary_inner_classes }} ">
+			<div class="stories-card-primary // {{ stories_card_primary_classes }}">
+				{% include "@larva/objects/o-card/o-card.twig" with stories[0] %} 
+			</div> 
+			<div class="stories-card-secondary // {{ stories_card_secondary_classes }} ">
+				<div class=" stories-card-secondary-inner // {{ stories_card_secondary_inner_classes }}">
+					{% include "@larva/objects/o-card/o-card.twig" with stories[1] %} 
+					{% include "@larva/objects/o-card/o-card.twig" with stories[2] %} 
+				</div> 
+				{% include "@larva/objects/o-card/o-card.twig" with stories[3] %} 
+			</div> 
+		</div> 
+	</div>
+	<div class="stories-content-secondary // {{ stories_content_secondary_classes }} "> 
+		<div class="stories-content-secondary-inner // {{ stories_content_secondary_inner_classes }} ">
+			{% include "@larva/objects/o-card/o-card.twig" with stories[4] %} 
+			{% include "@larva/objects/o-card/o-card.twig" with stories[5] %} 
+		</div>   
+	</div> 
+</section>

package/modules/separator/separator.prototype.js

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

package/modules/separator/separator.thick.js

@@ -0,0 +1,7 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const separator = clonedeep( require( './separator.prototype' ) );
+
+separator.separator_classes = 'lrv-u-border-a-3';
+
+module.exports = separator;

package/modules/separator/separator.twig

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

package/modules/separator/separator.wide-thick.js

@@ -0,0 +1,7 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const separator = clonedeep( require( './separator.wide' ) );
+
+separator.separator_classes = 'lrv-u-margin-tb-1 lrv-u-border-a-3 lrv-u-margin-lr-2 lrv-u-margin-lr-4@desktop';
+
+module.exports = separator;

package/modules/separator/separator.wide.js

@@ -0,0 +1,7 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const separator = clonedeep( require( './separator.prototype' ) );
+
+separator.separator_classes = 'lrv-u-margin-tb-1 lrv-u-border-a-1 lrv-u-margin-lr-2 lrv-u-margin-lr-4@desktop';
+
+module.exports = separator;

package/modules/social-share/social-share.prototype.js

@@ -0,0 +1,43 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_icon = clonedeep( require( '../../components/c-icon/c-icon.prototype' ) );
+const social_share_primary_items = [ 'facebook', 'twitter', 'pinterest', 'tumblr', 'reddit', 'linkedin', 'print' ];
+
+const social_share_primary = [];
+const social_share_secondary = [];
+
+const c_icon_struct = clonedeep( c_icon );
+c_icon_struct.c_icon_link_classes = 'lrv-a-unstyle-link lrv-u-display-block lrv-u-display-inline-flex';
+c_icon_struct.c_icon_url = '#';
+c_icon_struct.c_icon_classes = 'lrv-u-width-16 lrv-u-height-16';
+
+for ( let i = 0; i < social_share_primary_items.length; i++ ) {
+	let c_icon_social = clonedeep( c_icon_struct );
+
+	c_icon_social.c_icon_rel_name = social_share_primary_items[i];
+	c_icon_social.c_icon_name = social_share_primary_items[i];
+
+	if ( 3 < i ) {
+		social_share_primary.push( c_icon_social );
+	} else {
+		social_share_secondary.push( c_icon_social );
+	}
+}
+
+const c_icon_plus = clonedeep( c_icon );
+c_icon_plus.c_icon_link_classes = 'lrv-a-unstyle-button lrv-u-cursor-pointer';
+c_icon_plus.c_icon_url = '';
+c_icon_plus.c_icon_rel_name = 'plus';
+c_icon_plus.c_icon_name = 'plus';
+c_icon_plus.c_icon_classes = 'lrv-u-width-16 lrv-u-height-16';
+
+module.exports = {
+	social_share_classes: '',
+	social_share_prefix: false,
+	social_share_prefix_classes: 'lrv-u-display-none@mobile-max lrv-u-color-grey lrv-u-font-size-10 lrv-u-text-transform-uppercase lrv-u-margin-r-1@tablet lrv-u-margin-b-050@mobile-max',
+	social_share_prefix_text: 'Share',
+	social_share_items_classes: 'lrv-a-space-children--1 lrv-a-space-children-horizontal',
+	social_share_primary: social_share_primary,
+	social_share_secondary: social_share_secondary,
+	c_icon_plus: c_icon_plus
+};

package/modules/social-share/social-share.twig

@@ -0,0 +1,30 @@
+<div class="social-share // lrv-u-align-items-center lrv-u-flex {{ social_share_classes }}">
+	{% if social_share_prefix %}
+		<span class="{{ social_share_prefix_classes }}">
+			{{ social_share_prefix_text }}
+		</span>
+	{% endif %}
+
+	<h2 id="article-social-share" class="lrv-a-screen-reader-only">Services to share this page.</h2>
+	<ul class="lrv-a-unstyle-list lrv-u-flex lrv-u-flex-wrap-wrap {{ social_share_items_classes }}" data-collapsible="collapsed" aria-labelledby="article-social-share">
+		{% for item in social_share_primary %}
+			<li class="{{ social_share_item_classes }}">
+				{% include "@larva/components/c-icon/c-icon.twig" with item %}
+			</li>
+		{% endfor %}
+
+		{% if social_share_secondary %}
+			<li data-collapsible-toggle>
+				<button  class="c-button {{ c_icon_plus['c_icon_link_classes'] }}" title="Show more sharing options" data-toggle>
+					{% include "@larva/components/c-icon/c-icon.twig" with c_icon_plus %}
+				</button>
+			</li>
+
+			{% for item in social_share_secondary %}
+				<li class="{{ social_share_item_classes }}" data-collapsible-panel>
+					{% include "@larva/components/c-icon/c-icon.twig" with item %}
+				</li>
+			{% endfor %}
+		{% endif %}
+	</ul>
+</div>

package/modules/special-coverage/special-coverage.prototype.js

@@ -0,0 +1,47 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const story_card = clonedeep( require( '@penskemediacorp/larva-patterns/modules/story/story.vertical' ) );
+const c_heading    = clonedeep( require('@penskemediacorp/larva-patterns/components/c-heading/c-heading.prototype') );
+const c_lazy_image   = clonedeep( require( '@penskemediacorp/larva-patterns/components/c-lazy-image/c-lazy-image.prototype.js' ) );
+
+c_heading.c_heading_classes += ' a-font-theme-primary-s lrv-u-font-size-32@desktop lrv-u-font-size-28 lrv-u-line-height-small lrv-u-text-transform-uppercase lrv-u-line-height-small';
+
+heading_1 = clonedeep( c_heading );
+heading_2 = clonedeep( c_heading );
+
+heading_1.c_heading_text = 'Rolling Stone';
+heading_1.c_heading_classes += ' lrv-u-color-brand-primary';
+
+heading_2.c_heading_text = 'Reports';
+
+c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-5x1';
+
+story_card.story_classes += ' lrv-u-padding-lr-2@desktop-xl lrv-u-padding-lr-1@desktop lrv-u-padding-tb-125@mobile-max lrv-u-flex-basis-100p';  
+story_card.c_dek.c_dek_classes = 'lrv-a-font-body-s lrv-a-hidden@mobile-max lrv-u-margin-a-00';
+story_card.c_title.c_title_classes = 'lrv-a-font-primary-xs lrv-u-display-block lrv-u-margin-b-050 ';
+story_card.c_title.c_title_link_classes += ' lrv-a-truncate-ellipsis-5line';
+story_card.story_grid_secondary_classes = 'lrv-a-span2';
+story_card.story_links_classes += ' lrv-u-margin-tb-00@desktop lrv-u-margin-tb-00@mobile-max lrv-u-margin-t-1@desktop';
+story_card.story_nav_classes = 'lrv-a-font-secondary-m';
+story_card.story_grid_classes = 'lrv-u-flex lrv-u-flex-direction-column@desktop';
+story_card.story_grid_primary_classes = 'lrv-u-flex-basis-50p@mobile-max lrv-u-margin-r-1@mobile-max';
+story_card.story_grid_secondary_classes = 'lrv-u-flex-basis-50p@mobile-max';
+story_card.c_span = false;
+story_card.c_dek = false;
+story_card.c_tagline_author = false;
+story_card.c_timestamp = false;
+story_card.c_link_bottom = false;
+
+const special_coverage_items = [ story_card, story_card, story_card, story_card ];
+
+module.exports = {
+    special_coverage_wrapper_classes: 'lrv-u-flex lrv-u-flex-direction-column@mobile-max lrv-u-padding-lr-150@mobile-max',
+    special_coverage_banner_classes: 'lrv-u-margin-r-2@desktop lrv-u-padding-tb-1 lrv-u-padding-tb-2@desktop lrv-u-flex-basis-15p@desktop',
+    special_coverage_items_classes: ' lrv-u-flex lrv-a-children-border-horizontal@desktop lrv-a-children-border-vertical@mobile-max lrv-u-flex-direction-column@mobile-max lrv-u-flex-basis-85p@desktop',
+    special_coverage_heading_classes: 'lrv-u-padding-b-150@desktop lrv-u-padding-b-125@mobile-max lrv-u-border-b-1',
+    special_coverage_logo_classes: 'lrv-u-padding-t-150@desktop lrv-u-padding-t-125@mobile-max',
+    heading_1,
+    heading_2,
+    c_lazy_image,
+    special_coverage_items,
+}

package/modules/special-coverage/special-coverage.twig

@@ -0,0 +1,29 @@
+<div class="special-coverage {{ special_coverage_classes }}">
+	<div class="{{ special_coverage_wrapper_classes }}">
+		<div class="{{ special_coverage_banner_classes }}">
+			{% if special_coverage_heading_classes %}
+				<div class="special-coverage-heading {{ special_coverage_heading_classes }}">
+					{% if heading_1 %} 
+						{% include "@larva/components/c-heading/c-heading.twig" with heading_1 %}
+					{% endif %}	
+					{% if heading_2 %}
+						{% include "@larva/components/c-heading/c-heading.twig" with heading_2 %}
+					{% endif %}	
+				</div>
+			{% endif %}	
+			{% if c_lazy_image %}
+				<div class="special-coverage-logo {{ special_coverage_logo_classes }}">
+					{% include "@larva/components/c-lazy-image/c-lazy-image.twig" with c_lazy_image %}
+				</div>  
+			{% endif %}			     
+		</div>
+		<div class="{{ special_coverage_items_classes }}">
+			{% for item in special_coverage_items %}
+				{% include "@larva/modules/story/story.twig" with item %}
+			{% endfor %}
+		</div>
+	</div>
+	{% if c_span %}
+		{% include "@larva/components/c-span/c-span.twig" with c_span %}
+	{% endif %}	
+<div>

package/modules/story/story.borders.js

@@ -0,0 +1,8 @@
+const { __experimentalCloneWithFallback } = require( '@penskemediacorp/larva' );
+
+const story_borders = __experimentalCloneWithFallback( 'modules/story/story.prototype' );
+
+story_borders.story_grid_classes += ' lrv-u-border-a-1';
+story_borders.story_grid_secondary_classes += ' lrv-u-padding-r-2@desktop-xl lrv-u-padding-r-00 lrv-u-padding-r-1@desktop';
+
+module.exports = story_borders;

package/modules/story/story.center-vertical-borders.js

@@ -0,0 +1,7 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const story_center_vertical_borders = clonedeep( require( './story.center-vertical' ) );
+
+story_center_vertical_borders.story_grid_classes += ' lrv-u-border-a-1';
+
+module.exports = story_center_vertical_borders;

package/modules/story/story.center-vertical.js

@@ -0,0 +1,11 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const story_center_vertical = clonedeep( require( './story.vertical' ) );
+
+story_center_vertical.story_nav_classes += ' lrv-u-justify-content-center';
+story_center_vertical.story_links_classes += ' lrv-u-justify-content-center';
+story_center_vertical.c_link_bottom_wrapper_classes += ' lrv-u-justify-content-center';
+
+story_center_vertical.story_grid_secondary_classes += ' lrv-u-text-align-center';
+
+module.exports = story_center_vertical;

package/modules/story/story.prototype.js

@@ -0,0 +1,43 @@
+const { __experimentalCloneWithFallback } = require( '@penskemediacorp/larva' );
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_span = __experimentalCloneWithFallback( 'components/c-span/c-span.tag' );
+const c_title = __experimentalCloneWithFallback( 'components/c-title/c-title.prototype' );
+const c_dek = __experimentalCloneWithFallback( 'components/c-dek/c-dek.prototype' );
+const c_tagline = __experimentalCloneWithFallback( 'components/c-tagline/c-tagline.prototype' );
+const c_timestamp = __experimentalCloneWithFallback( 'components/c-timestamp/c-timestamp.prototype' );
+
+const c_tagline_author = clonedeep( c_tagline );
+const c_lazy_image = clonedeep( require( '../../components/c-lazy-image/c-lazy-image.prototype' ) );
+
+c_title.c_title_text = '‘A Momentous Weekend’: LACMA’s High-Stakes Collectors Committee Event Raises $2.4 M.';
+c_title.c_title_classes = 'lrv-u-font-size-14 lrv-u-font-size-26@tablet lrv-u-font-size-32@desktop lrv-u-font-family-primary lrv-u-display-block lrv-u-font-weight-normal lrv-u-font-weight-bold@desktop lrv-u-line-height-small lrv-u-margin-b-050';
+c_title.c_title_link_classes = 'lrv-a-unstyle-link lrv-u-color-brand-primary:hover';
+
+c_dek.c_dek_text = false;
+c_dek.c_dek_markup = 'Lorem ipsum <i>dolor</i> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.';
+
+c_tagline_author.c_tagline_classes = 'lrv-u-margin-l-050';
+c_tagline_author.c_tagline_markup = "<a href='#'>Staff Writer</a>";
+c_tagline_author.c_tagline_text = false;
+
+c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-3x2';
+
+module.exports = {
+	story_classes: '',
+	story_nav_classes: 'lrv-u-font-size-12 lrv-u-font-family-primary lrv-u-text-transform-uppercase lrv-u-font-weight-bold lrv-u-color-black ',
+	story_nav_layout_classes: 'lrv-u-flex lrv-u-align-items-center lrv-a-space-children-horizontal lrv-a-space-children--2 lrv-a-hidden@mobile-max lrv-u-margin-t-050',
+	story_grid_classes: 'lrv-a-grid lrv-a-cols3',
+	story_grid_primary_classes: 'lrv-u-margin-r-2@desktop-xl lrv-u-margin-r-00 lrv-u-margin-r-1@desktop',
+	story_grid_secondary_classes: 'lrv-a-span2',
+	story_links_classes: '',
+	c_span,
+	c_link: false,
+	c_link_bottom: false,
+	c_link_bottom_wrapper_classes: '',
+	c_title: c_title,
+	c_dek: c_dek,
+	c_lazy_image: c_lazy_image,
+	c_tagline_author,
+	c_timestamp,
+};

package/modules/story/story.right-borders.js

@@ -0,0 +1,9 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const story_right_borders = clonedeep( require( './story.right' ) );
+
+story_right_borders.story_grid_classes += ' lrv-u-border-a-1';
+
+story_right_borders.story_grid_secondary_classes += ' lrv-u-padding-l-2@desktop-xl lrv-u-padding-l-00 lrv-u-padding-l-1@desktop';
+
+module.exports = story_right_borders;

package/modules/story/story.right.js

@@ -0,0 +1,14 @@
+const { __experimentalCloneWithFallback } = require( '@penskemediacorp/larva' );
+
+const story_right = __experimentalCloneWithFallback( 'modules/story/story.prototype' );
+
+story_right.story_grid_primary_classes = 'lrv-u-margin-l-2@desktop-xl lrv-u-margin-l-00 lrv-u-margin-l-1@desktop';
+
+story_right.story_grid_primary_classes += ' lrv-u-order-100';
+story_right.story_grid_secondary_classes += ' lrv-u-order-n1 lrv-u-text-align-right';
+
+story_right.story_nav_classes += ' lrv-u-justify-content-end';
+story_right.story_links_classes += ' lrv-u-justify-content-end';
+story_right.c_link_bottom_wrapper_classes += ' lrv-u-justify-content-end';
+
+module.exports = story_right;

package/modules/story/story.story-arc.js

@@ -0,0 +1,9 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const story_story_arc = clonedeep( require( './story.prototype' ) );
+
+const story_arc_stories = clonedeep( require( '../story-arc-stories/story-arc-stories.prototype' ) );
+
+story_story_arc.story_arc_stories = story_arc_stories;
+
+module.exports = story_story_arc;