@penskemediacorp/larva-patterns 1.6.0-alpha.0 → 1.6.0

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,28 @@
+const { __experimentalCloneWithFallback } = require( '@penskemediacorp/larva' );
+const clonedeep = require( 'lodash.clonedeep' );
+
+
+const c_title = __experimentalCloneWithFallback( 'components/c-title/c-title.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_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_quote_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.',
+    story_quote_markup_classes: 'lrv-a-font-primary-l',
+    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_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,27 @@
+<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 story_quote_markup %}
+				<p class="story-quote-markup {{ story_quote_markup_classes }}">
+					{{ story_quote_markup|raw }}
+				</p>
+			{% 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 %}

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

@@ -0,0 +1,41 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const o_story_featured = clonedeep( require( '@penskemediacorp/larva-patterns/modules/story/story.center-vertical' ) );
+const o_story = clonedeep( require( '@penskemediacorp/larva-patterns/modules/story/story.vertical' ) );
+
+o_story_featured.c_timestamp = false;
+o_story_featured.story_grid_secondary_classes = 'lrv-u-flex lrv-u-flex-direction-column lrv-u-height-100p lrv-u-justify-content-center@tablet lrv-u-text-align-center@tablet';
+o_story_featured.c_title.c_title_classes = 'lrv-a-font-primary-l c-title lrv-u-display-block lrv-u-margin-b-050';
+o_story_featured.c_span.c_span_classes = 'lrv-u-display-inline-block lrv-u-padding-a-050 lrv-u-background-color-white lrv-u-text-transform-uppercase lrv-a-font-basic-l lrv-u-display-inline-block';
+o_story_featured.c_span.c_span_link_classes = 'lrv-u-color-white lrv-u-background-color-brand-primary lrv-u-line-height-normal lrv-u-padding-a-025 lrv-u-padding-lr-050 lrv-u-display-inline-block';
+o_story_featured.c_span.c_span_url = '#';
+o_story_featured.c_dek.c_dek_classes = 'lrv-a-font-secondary-xs lrv-u-margin-tb-050 lrv-u-letter-spacing-0006@tablet lrv-u-width-70p lrv-u-width-100p@mobile-max lrv-u-margin-lr-auto';
+o_story_featured.story_nav_classes = 'lrv-a-font-body-m lrv-u-color-black lrv-u-text-transform-uppercase lrv-u-color-black  lrv-u-justify-content-center@tablet';
+o_story_featured.c_tagline_author.c_tagline_classes = 'lrv-u-color-black lrv-u-margin-l-050';
+o_story_featured.story_links_classes = 'lrv-u-justify-content-center@tablet lrv-u-transform-translateY-n50p u-z-index-middle-bottom lrv-u-position-relative lrv-u-margin-b-00@mobile-max';
+o_story_featured.story_nav_layout_classes = 'lrv-u-flex lrv-u-align-items-center lrv-a-space-children-horizontal lrv-a-space-children--2 lrv-u-margin-t-050';
+
+o_story.story_grid_secondary_classes = '';
+o_story.c_timestamp = false;
+o_story.c_dek = false;
+o_story.story_classes = '';
+o_story.c_span.c_span_classes = 'lrv-a-font-basic-xs lrv-u-border-b-1 lrv-u-text-transform-uppercase lrv-u-padding-b-050';
+o_story.c_lazy_image.c_lazy_image_classes = 'lrv-u-margin-b-125';
+o_story.c_title.c_title_classes = 'lrv-a-font-primary-m lrv-u-margin-b-050 lrv-u-font-size-26@mobile-max lrv-u-margin-t-050';
+o_story.story_nav_classes = 'lrv-a-font-body-xxs lrv-u-color-black lrv-u-text-transform-uppercase lrv-u-color-black ';
+o_story.c_tagline_author.c_tagline_classes = 'lrv-a-font-body-xxs lrv-u-color-black lrv-u-margin-l-050 lrv-u-letter-spacing-0106@tablet lrv-u-letter-spacing-0140@mobile-max';
+o_story.story_nav_layout_classes = 'lrv-u-flex lrv-u-align-items-center lrv-a-space-children-horizontal lrv-a-space-children--2 lrv-u-margin-t-050';
+
+const stories = [
+	o_story,
+	o_story,
+];
+
+module.exports = {
+	o_story_featured,
+	top_stories_classes: 'lrv-u-flex lrv-u-flex-wrap-wrap lrv-u-margin-b-075',
+	featured_story_classes: 'lrv-u-width-100p@mobile-max lrv-u-width-70p lrv-u-padding-r-125 lrv-u-padding-r-150@desktop lrv-u-padding-r-00@mobile-max lrv-u-padding-b-2@mobile-max lrv-u-margin-b-2@mobile-max u-border-b-1@mobile-max',
+	story_items_classes: 'lrv-u-width-30p lrv-u-width-100p@mobile-max lrv-a-children-border-vertical lrv-a-space-children lrv-a-space-children--2 lrv-a-space-children-vertical lrv-u-padding-l-125 lrv-u-padding-l-150@desktop lrv-u-padding-l-00@mobile-max',
+	story_item_classes: '',
+	stories,
+};

package/modules/top-stories/top-stories.twig

@@ -0,0 +1,12 @@
+<div class="top-stories // {{ top_stories_classes }}">
+	<div class="featured-story-item {{ featured_story_classes }}">
+		{% include "@larva/modules/story/story.twig" with o_story_featured %}
+	</div>
+	<div class="story-items {{ story_items_classes }}">
+		{% for item in stories %}
+			<div class="story-item {{ story_item_classes }}">
+				{% include "@larva/modules/story/story.twig" with item %}
+			</div>
+		{% endfor %}
+	</div>
+</div>

package/modules/top-stories/top-stories.xl.js

@@ -0,0 +1,14 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const top_stories = clonedeep( require( './top-stories.prototype' ) );
+
+top_stories.o_story_featured.c_title.c_title_classes = 'lrv-a-font-primary-xl c-title lrv-u-display-block lrv-u-margin-b-050';
+top_stories.o_story_featured.c_link_bottom = false;
+
+top_stories.stories.map( ( o_story ) => {
+	o_story.c_span = false;
+	o_story.c_link_bottom = false;
+});
+
+
+module.exports = top_stories;

package/modules/vlanding-playlist/README.md

@@ -0,0 +1 @@
+There is nothing fancy about this module - it is as it appears: a large card on the left and a few smaller ones on the right, along with a header that supports a link to "view more" or similar. It is intended to be used with carousels to display curated playlists below the vlanding-video-showcase.

package/modules/vlanding-playlist/vlanding-playlist.prototype.js

@@ -0,0 +1,34 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const o_header = clonedeep( require( '../../objects/o-header/o-header.prototype' ) );
+const o_card = clonedeep( require( '../../objects/o-card/o-card.prototype' ) );
+
+o_header.o_heading_classes = 'lrv-u-flex lrv-u-align-items-center lrv-u-border-b-1 lrv-u-border-color-grey-light lrv-u-margin-b-1';
+o_header.c_heading.c_heading_text = 'Behind the Lens';
+o_header.c_heading.c_heading_classes = 'lrv-u-font-size-32';
+
+o_header.c_button.c_button_classes += ' lrv-u-font-weight-bold';
+
+o_card.c_span = false;
+o_card.c_timestamp = false;
+o_card.o_card_link_url = '#';
+o_card.o_card_link_classes = 'lrv-a-unstyle-link';
+o_card.c_lazy_image.c_lazy_image_classes = 'lrv-u-margin-b-050';
+o_card.c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-4x3';
+o_card.c_title.c_title_url = false;
+
+const o_card_large = clonedeep( o_card );
+
+o_card.c_title.c_title_classes = 'lrv-u-font-size-12';
+o_card_large.c_title.c_title_classes = 'lrv-u-font-size-20@desktop lrv-u-font-size-12';
+
+module.exports = {
+	o_header: o_header,
+	vlanding_playlist_large_card: o_card_large,
+	vlanding_playlist_small_cards: [
+		o_card,
+		o_card,
+		o_card,
+		o_card
+	]
+};

package/modules/vlanding-playlist/vlanding-playlist.twig

@@ -0,0 +1,20 @@
+<section class="vlanding-playlist // lrv-u-padding-tb-2 lrv-u-padding-tb-1@mobile-max">
+	{% if o_header %}
+		<div class="lrv-a-wrapper">
+			{% include "@larva/objects/o-header/o-header.twig" with o_header %}
+		</div>
+	{% endif %}
+
+	<div class="lrv-a-wrapper lrv-a-scrollable-grid@desktop-max lrv-a-grid lrv-a-cols2@desktop">
+		{% if vlanding_playlist_large_card %}
+			{% include "@larva/objects/o-card/o-card.twig" with vlanding_playlist_large_card %}
+		{% endif %}
+		<div class="lrv-a-scrollable-grid__nested@desktop-max lrv-a-grid lrv-a-cols2@desktop">
+			{% for item in vlanding_playlist_small_cards %}
+				{% include "@larva/objects/o-card/o-card.twig" with item %}
+			{% endfor %}
+		</div>
+	</div>
+</section>
+
+

package/modules/vlanding-video-card/README.md

@@ -0,0 +1 @@
+This pattern is included in `vlanding-video-showcase`, and is intended to be used there only.

package/modules/vlanding-video-card/vlanding-video-card.prototype.js

@@ -0,0 +1,25 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_lazy_image = clonedeep( require( './../../components/c-lazy-image/c-lazy-image.prototype' ) );
+const c_title = clonedeep( require( './../../components/c-title/c-title.prototype' ) );
+const c_span = clonedeep( require( './../../components/c-span/c-span.prototype' ) );
+
+module.exports = {
+	vlanding_video_card_permalink_url: '#',
+	vlanding_video_card_use_button: true,
+	vlanding_video_card_link_aria_controls_attr: '',
+	vlanding_video_card_link_classes: 'lrv-a-unstyle-link',
+	vlanding_video_card_link_showcase_trigger_data_attr: 'x3HbbzHK5Mc',
+	vlanding_video_card_link_showcase_type_data_attr: 'youtube',
+	vlanding_video_card_link_showcase_dek_data_attr: 'text for the dek, update this',
+	vlanding_video_card_link_showcase_title_data_attr: 'title that should be the same as the card',
+	vlanding_video_card_link_showcase_permalink_data_url: '#',
+	vlanding_video_card_active_txt_attr: 'Now Playing',
+	vlanding_video_card_classes: '',
+	vlanding_video_card_crop_class: '',
+	c_lazy_image: c_lazy_image,
+	vlanding_video_card_is_player: '',
+	c_title: c_title,
+	c_span: c_span,
+	vlanding_video_card_social_share_markup: '',
+};

package/modules/vlanding-video-card/vlanding-video-card.twig

@@ -0,0 +1,56 @@
+{% if vlanding_video_card_permalink_url %}
+	{% if vlanding_video_card_use_button %}
+	<button class="vlanding-video-card__link lrv-a-unstyle-button lrv-u-width-100p {{ vlanding_video_card_link_classes }}"
+		data-video-showcase-trigger="{{ vlanding_video_card_link_showcase_trigger_data_attr }}"
+		data-video-showcase-type="{{ vlanding_video_card_link_showcase_type_data_attr }}"
+		data-video-showcase-dek="{{ vlanding_video_card_link_showcase_dek_data_attr }}"
+		data-video-showcase-title="{{ vlanding_video_card_link_showcase_title_data_attr }}"
+		data-video-showcase-permalink="{{ vlanding_video_card_link_showcase_permalink_data_url }}"
+		{% if vlanding_video_card_link_aria_controls_attr %}
+			aria-controls="{{ vlanding_video_card_link_aria_controls_attr }}"
+		{% endif %}
+	>
+	{% else %}
+	<a href="{{ vlanding_video_card_permalink_url }}" class="vlanding-video-card__link {{ vlanding_video_card_link_classes }}" data-video-showcase-trigger="{{ vlanding_video_card_link_showcase_trigger_data_attr }}" data-video-showcase-type="{{ vlanding_video_card_link_showcase_type_data_attr }}" data-video-showcase-dek="{{ vlanding_video_card_link_showcase_dek_data_attr }}" data-video-showcase-title="{{ vlanding_video_card_link_showcase_title_data_attr }}" data-video-showcase-permalink="{{ vlanding_video_card_link_showcase_permalink_data_url }}">
+	{% endif %}
+{% endif %}
+
+	<div class="vlanding-video-card {{ vlanding_video_card_classes }}" data-video-showcase-player>
+
+		<div class="{{ vlanding_video_card_crop_class }}" data-video-showcase-active-text="{{ vlanding_video_card_active_txt_attr }}">
+
+			{% if c_lazy_image %}
+				{% include "@larva/components/c-lazy-image/c-lazy-image.twig" with c_lazy_image %}
+			{% endif %}
+
+			{% if vlanding_video_card_is_player %}
+				<iframe hidden id="youtubePlayerContainer" frameborder="0" data-video-showcase-iframe></iframe>
+				<div hidden id="jwplayerContainer" data-video-showcase-jwplayer></div>
+			{% endif %}
+
+		</div>
+
+		{% if c_span %}
+			{% include "@larva/components/c-span/c-span.twig" with c_span %}
+		{% endif %}
+
+		{% if c_title %}
+			{% include "@larva/components/c-title/c-title.twig" with c_title %}
+		{% endif %}
+
+	</div>
+
+{% if vlanding_video_card_permalink_url %}
+	{% if vlanding_video_card_use_button %}
+	</button>
+	{% else %}
+	</a>
+	{% endif %}
+{% endif %}
+
+{% if vlanding_video_card_social_share_markup %}
+	<div class="lrv-a-hidden" data-video-showcase-trigger-social-share>
+		{{ vlanding_video_card_social_share_markup }}
+	</div>
+{% endif %}
+

package/modules/vlanding-video-showcase/README.md

@@ -0,0 +1,12 @@
+This Video Showcase supports YouTube and JWPlayer videos and an option listing of video thumbnails below the large player. Clicking one of the thumbnails will load its video and associated content in the large player.
+
+Options:
+- Set social_share to false, to exclude the share bar in the large video
+- Set vlanding_video_showcase_video_cards to false to exclude the 'Latest Videos'
+- Show a Sponsored badge for the video. Note that this requires a server-side class to hide/show the badge, but retain the DOM markup for future elements. Example logic:
+```
+// Add a-hidden if not sponsored.
+if ( ! \Deadline\Inc\Article::is_sponsored( $vlanding_video_card['post_id'] ) ) {
+	$vlanding_video_showcase['c_span']['c_span_classes'] .= ' lrv-a-hidden';
+}
+```

package/modules/vlanding-video-showcase/vlanding-video-showcase.prototype.js

@@ -0,0 +1,68 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const vlanding_video_card = clonedeep( require( '../../modules/vlanding-video-card/vlanding-video-card.prototype' ) );
+const social_share = clonedeep( require( '../../modules/social-share/social-share.prototype' ) );
+const c_span = clonedeep( require( '../../components/c-span/c-span.prototype' ) );
+const c_title = clonedeep( require( '../../components/c-title/c-title.prototype' ) );
+const c_dek = clonedeep( require( '../../components/c-dek/c-dek.prototype' ) );
+const c_heading = clonedeep( require( '../../components/c-heading/c-heading.prototype' ) );
+
+const vlanding_video_card_player = clonedeep( vlanding_video_card );
+const vlanding_video_showcase_card = clonedeep( vlanding_video_card );
+
+const demoVideos = [
+	'TxC_UpC0iyk',
+	'_JFOdYRfqBQ',
+	'UmjBAjsLMms',
+	'bgs2PgWE',
+	'getvYflDK98'
+];
+
+const vlanding_video_showcase_video_cards = [];
+
+vlanding_video_showcase_card.c_title.c_title_url = false;
+vlanding_video_showcase_card.c_title.c_title_classes = 'lrv-u-font-size-14 lrv-u-font-weight-normal lrv-u-padding-t-050';
+
+vlanding_video_showcase_card.c_span.c_span_classes += ' lrv-u-display-block lrv-u-padding-b-00 lrv-u-padding-t-050 lrv-u-font-size-12 lrv-u-font-weight-normal';
+
+vlanding_video_card_player.c_title = false;
+vlanding_video_card_player.c_span = false;
+
+// Move the crop class to the card so the iframe will position relative to that
+// instead of c-lazy-image
+vlanding_video_card_player.vlanding_video_card_is_player = true;
+vlanding_video_card_player.c_lazy_image.c_lazy_image_crop_class = '';
+vlanding_video_card_player.vlanding_video_card_crop_class = 'lrv-a-crop-16x9';
+
+c_title.c_title_classes = 'lrv-u-font-size-24 lrv-u-font-size-32@desktop lrv-u-padding-b-1 js-VideoShowcase-title';
+c_title.c_title_link_classes = 'lrv-a-unstyle-link';
+c_title.c_title_text = 'Roseanne is Cancelled and I\'m So Sad About It';
+
+c_dek.c_dek_classes = 'lrv-u-font-size-18 lrv-u-margin-t-00 lrv-a-hidden@mobile-max js-VideoShowcase-dek';
+
+c_heading.c_heading_text = 'The Latest Videos';
+c_heading.c_heading_classes = 'lrv-u-font-size-18 lrv-u-font-size-24@desktop lrv-u-font-size-28@desktop-xl lrv-u-border-b-1 lrv-u-border-color-grey-light lrv-u-padding-b-050 lrv-u-margin-tb-1';
+
+vlanding_video_showcase_card.vlanding_video_card_link_showcase_trigger_data_attr = '_JFOdYRfqBQ';
+vlanding_video_showcase_card.vlanding_video_card_link_showcase_type_data_attr = 'youtube';
+vlanding_video_showcase_card.c_span = false;
+
+demoVideos.map( ( videoId ) => {
+	let newVideo = clonedeep( vlanding_video_showcase_card );
+
+	newVideo.vlanding_video_card_link_showcase_trigger_data_attr = videoId;
+	vlanding_video_showcase_video_cards.push( newVideo );
+});
+
+module.exports = {
+	vlanding_video_showcase_classes: '',
+	vlanding_video_card_player: vlanding_video_card_player,
+	c_span: c_span,
+	c_title: c_title,
+	c_dek: c_dek,
+	social_share: social_share,
+	c_heading: c_heading,
+	vlanding_video_showcase_video_cards_classes: 'js-Flickity js-Flickity--fifths js-Flickity--isContained',
+	vlanding_video_showcase_video_cards_item_classes: 'js-Flickity-cell lrv-u-margin-r-1',
+	vlanding_video_showcase_video_cards: vlanding_video_showcase_video_cards
+};

package/modules/vlanding-video-showcase/vlanding-video-showcase.twig

@@ -0,0 +1,46 @@
+<section class="vlanding-video-showcase // {{ vlanding_video_showcase_classes }}" data-video-showcase="">
+	<div class="lrv-a-wrapper lrv-a-grid lrv-a-cols3@tablet">
+		<div class="lrv-a-grid-item lrv-a-span2@tablet">
+			{% if vlanding_video_card_player %}
+				{% include "@larva/modules/vlanding-video-card/vlanding-video-card.twig" with vlanding_video_card_player %}
+			{% endif %}
+		</div>
+		<div class="lrv-a-grid-item lrv-u-margin-tb-auto lrv-u-margin-tb-auto">
+			{% if c_span %}
+				{% include "@larva/components/c-span/c-span.twig" with c_span %}
+			{% endif %}
+
+			{% 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 %}
+
+			{% if social_share %}
+				{% include "@larva/modules/social-share/social-share.twig" with social_share %}
+			{% endif %}
+		</div>
+	</div>
+
+	{% if vlanding_video_showcase_video_cards %}
+
+		<div class="lrv-a-wrapper lrv-u-padding-t-1">
+			{% if c_heading %}
+				{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
+			{% endif %}
+
+			<div class="vlanding-video-showcase__video-cards // lrv-u-overflow-hidden lrv-a-glue-parent">
+				<ul class="lrv-a-unstyle-list lrv-a-scrollable-grid@desktop-max {{ vlanding_video_showcase_video_cards_classes }}">
+					{% for item in vlanding_video_showcase_video_cards %}
+						<li class="{{ vlanding_video_showcase_video_cards_item_classes }}">
+							{% include "@larva/modules/vlanding-video-card/vlanding-video-card.twig" with item %}
+						</li>
+					{% endfor %}
+				</ul>
+			</div>
+		</div>
+
+	{% endif %}
+</section>