@penskemediacorp/larva-patterns 1.2.0-alpha.0 → 1.3.0

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;

package/modules/story/story.twig

@@ -0,0 +1,88 @@
+<div class="story lrv-u-padding-tb-1 lrv-u-padding-tb-2@desktop // {{ story_classes }}">
+	<div class="{{ story_grid_classes }}">
+
+		<div class="{{ story_grid_primary_classes }} // lrv-a-glue-parent u-padding-t-1@mobile-max lrv-u-flex lrv-u-flex-direction-column lrv-u-height-100p lrv-u-justify-content-start">
+			<div class="lrv-a-glue-parent">
+				{% if c_lazy_image %}
+					{% include "@larva/components/c-lazy-image/c-lazy-image.twig" with c_lazy_image %}
+				{% endif %}
+
+				{% if o_indicator %}
+					{% include "@larva/objects/o-indicator/o-indicator.twig" with o_indicator %}
+				{% endif %}
+			</div>
+		</div>
+
+		<div class="{{ story_grid_secondary_classes }} // lrv-u-flex lrv-u-flex-direction-column lrv-u-height-100p lrv-u-justify-content-center">
+			{% 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 %}
+
+			<ul class="lrv-u-flex lrv-u-order-n1 lrv-a-unstyle-list lrv-a-space-children-horizontal lrv-a-space-children--050 lrv-u-margin-b-050 u-letter-spacing-012 // {{ story_links_classes }}">
+
+				{% if c_link_top %}
+					<li>
+						{% include "@larva/components/c-link/c-link.twig" with c_link_top %}
+					</li>
+				{% endif %}
+
+				{% if c_span %}
+					<li>
+						{% include "@larva/components/c-span/c-span.twig" with c_span %}
+					</li>
+				{% endif %}
+
+				{% if article_kicker %}
+					<li>
+						{% include "@larva/modules/article-kicker/article-kicker.twig" with article_kicker %}
+					</li>
+				{% endif %}
+			</ul>
+
+			<ul class="lrv-a-unstyle-list // {{ story_nav_classes }} {{ story_nav_layout_classes }}">
+				{% if c_button %}
+					<li class="lrv-u-flex">
+						{% include "@larva/components/c-button/c-button.twig" with c_button %}
+					</li>
+				{% endif %}
+
+				{% if c_tagline_author %}
+					<li class="lrv-u-flex // {{ c_tagline_author_wrapper_classes }}">
+						By {% include "@larva/components/c-tagline/c-tagline.twig" with c_tagline_author %}
+					</li>
+				{% endif %}
+
+				{% if c_timestamp %}
+					<li>
+						{% include "@larva/components/c-timestamp/c-timestamp.twig" with c_timestamp %}
+					</li>
+				{% endif %}
+			</ul>
+
+			{% if c_link_bottom %}
+				<div class="lrv-u-flex lrv-u-order-100 lrv-u-margin-t-050 // {{ c_link_bottom_wrapper_classes }}">
+					{% if c_link_bottom %}
+						{% include "@larva/components/c-link/c-link.twig" with c_link_bottom %}
+					{% endif %}
+				</div>
+			{% endif %}
+
+		</div>
+
+	</div>
+
+	{% if story_arc_stories %}
+		<div class="lrv-u-margin-t-1 lrv-u-margin-t-2@desktop">
+			{% include "@larva/modules/story-arc-stories/story-arc-stories.twig" with story_arc_stories %}
+		</div>
+	{% endif %}
+
+</div>
+
+{% if is_river_story %}
+	{{ story_after_wp_action }}
+{% endif %}

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

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

package/modules/story/story.vertical.js

@@ -0,0 +1,11 @@
+const { __experimentalCloneWithFallback } = require( '@penskemediacorp/larva' );
+
+const story_vertical = __experimentalCloneWithFallback( 'modules/story/story.prototype' );
+
+story_vertical.story_grid_classes = '';
+
+story_vertical.story_grid_primary_classes = 'lrv-u-margin-r-00';
+
+story_vertical.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';
+
+module.exports = story_vertical;

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

@@ -0,0 +1,21 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_span = clonedeep( require( '../../components/c-span/c-span.prototype' ) );
+const c_button = clonedeep( require( '../../components/c-button/c-button.prototype' ) );
+const o_story_arc_item = clonedeep( require( '../../objects/o-story-arc-item/o-story-arc-item.prototype' ) );
+
+c_span.c_span_text = 'Event Coverage:';
+c_span.c_span_classes += ' lrv-u-font-weight-bold';
+
+c_button.c_button_text = 'Art Basel Hong Kong';
+c_button.c_button_url = '#';
+
+module.exports = {
+	c_span: c_span,
+	c_button: c_button,
+	story_arc_stories: [
+		o_story_arc_item,
+		o_story_arc_item,
+		o_story_arc_item,
+	]
+};

package/modules/story-arc-stories/story-arc-stories.twig

@@ -0,0 +1,14 @@
+<section class="story-arc-stories {{ story_arc_stories_classes }}">
+	<div class="lrv-u-font-family-primary lrv-u-margin-b-050">
+		{% include "@larva/components/c-span/c-span.twig" with c_span %}
+		{% include "@larva/components/c-button/c-button.twig" with c_button %}
+	</div>
+
+	<div class="lrv-u-overflow-hidden lrv-u-max-width-100vw lrv-u-padding-b-1">
+		<div class="lrv-u-width-100p lrv-u-max-width-100p a-scrollable-grid@desktop-max lrv-a-grid lrv-a-cols3@desktop">
+			{% for item in story_arc_stories %}
+				{% include "@larva/objects/o-story-arc-item/o-story-arc-item.twig" with item %}
+			{% endfor %}
+		</div>
+	</div>
+</section>

package/modules/story-featured-quote/story-featured-quote.prototype.js

@@ -0,0 +1,32 @@
+const { __experimentalCloneWithFallback } = require( '@penskemediacorp/larva' );
+const clonedeep = require( 'lodash.clonedeep' );
+
+
+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_tagline_author = clonedeep( c_tagline );
+
+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-family-primary lrv-u-display-block lrv-u-font-weight-normal lrv-u-line-height-small';
+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_dek.c_dek_classes = 'lrv-a-font-primary-l';
+
+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;
+
+module.exports = {
+    story_featured_quote_classes: 'lrv-u-text-align-center',
+    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 lrv-u-justify-content-center',
+    c_title: c_title,
+    c_dek: c_dek,
+    c_dek_url:'#',
+    c_dek_url_classes:'lrv-u-color-black lrv-a-unstyle-link',
+    c_tagline_author,
+};

package/modules/story-featured-quote/story-featured-quote.twig

@@ -0,0 +1,25 @@
+<div class="story lrv-u-padding-tb-1 lrv-u-padding-tb-2@desktop // {{ story_featured_quote_classes }}">
+	<div class="{{ story_featured_quote_primary_classes }} // lrv-u-flex lrv-u-flex-direction-column lrv-u-height-100p lrv-u-justify-content-center">
+		{% if c_dek_url %}
+		<a href="{{ c_dek_url }}" class="c-dek__link ">
+			{% endif %}
+			{% if c_dek %}
+				{% include "@larva/components/c-dek/c-dek.twig" with c_dek %}
+			{% endif %}
+			{% if c_dek_url %}
+		</a>
+		{% endif %}
+
+		<ul class="lrv-a-unstyle-list // {{ story_nav_classes }} {{ story_nav_layout_classes }}">
+			{% if c_title %}
+				{% include "@larva/components/c-title/c-title.twig" with c_title %}
+			{% endif %}
+
+			{% if c_tagline_author %}
+				<li class="lrv-u-flex // {{ c_tagline_author_wrapper_classes }}">
+					By {% include "@larva/components/c-tagline/c-tagline.twig" with c_tagline_author %}
+				</li>
+			{% endif %}
+		</ul>
+	</div>
+</div>

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

@@ -0,0 +1,24 @@
+const { __experimentalCloneWithFallback } = require( '@penskemediacorp/larva' );
+
+const story_card = __experimentalCloneWithFallback( 'modules/story/story.vertical' );
+
+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-xxs lrv-u-display-block lrv-u-margin-b-050';
+story_card.story_grid_secondary_classes = 'lrv-a-span2';
+story_card.story_links_classes += ' lrv-u-margin-t-050';
+story_card.story_nav_classes = 'lrv-a-font-secondary-m';
+
+module.exports = {
+	story_grid_classes: '',
+	story_grid_grid_classes: 'lrv-a-grid lrv-a-cols2 lrv-a-cols4@desktop',
+	story_grid_story_cards: [
+		story_card,
+		story_card,
+		story_card,
+		story_card,
+		story_card,
+		story_card,
+		story_card,
+		story_card,
+	],
+};

package/modules/story-grid/story-grid.river.js

@@ -0,0 +1,15 @@
+const { __experimentalCloneWithFallback } = require( '@penskemediacorp/larva' );
+const clonedeep = require( 'lodash.clonedeep' );
+
+const story_grid = __experimentalCloneWithFallback( 'modules/story-grid/story-grid.prototype' );
+const story_prototype = __experimentalCloneWithFallback( 'modules/story/story.prototype' );
+const c_span = __experimentalCloneWithFallback( 'components/c-span/c-span.prototype' );
+
+story_grid.story_grid_story_cards = story_grid.story_grid_story_cards.map( () => clonedeep( story_prototype ) );
+
+story_grid.story_grid_grid_classes = '';
+
+c_span.c_span_text = 'Read more'; 
+story_grid.c_span = c_span;
+
+module.exports = story_grid;

package/modules/story-grid/story-grid.twig

@@ -0,0 +1,17 @@
+<div class="story-grid lrv-u-padding-tb-1 lrv-u-padding-tb-2@desktop // {{ story_grid_classes }}">
+
+	{% if o_header %}
+		{% include "@larva/objects/o-header/o-header.twig" with o_header %}
+	{% endif %}
+
+	<ul class="{{ story_grid_grid_classes }} // lrv-a-unstyle-list lrv-u-margin-b-050">
+		{% for item in story_grid_story_cards %}
+			<li class="{{ story_grid_grid_item_classes }}">
+				{% include "@larva/modules/story/story.twig" with item %}
+			</li>
+		{% endfor %}
+	</ul>
+	{% if c_span %}
+		{% include "@larva/components/c-span/c-span.twig" with c_span %}
+	{% endif %}
+</div>

package/modules/sub-header/sub-header.prototype.js

@@ -0,0 +1,8 @@
+const { __experimentalCloneWithFallback } = require( '@penskemediacorp/larva' );
+
+const o_sub_header = __experimentalCloneWithFallback( 'objects/o-sub-header/o-sub-header.prototype' );
+
+module.exports = {
+	sub_header_classes: '',
+	o_sub_header: o_sub_header,
+};

package/modules/sub-header/sub-header.twig

@@ -0,0 +1,7 @@
+{% if o_sub_header %}
+	<div class="sub-header // {{ sub_header_classes }} lrv-u-padding-t-1 lrv-u-padding-t-2@desktop-xl lrv-u-padding-b-1@mobile-max">
+		<div class="lrv-a-wrapper">
+			{% include "@larva/objects/o-sub-header/o-sub-header.twig" with o_sub_header %}
+		</div>
+	</div>
+{% endif %}