@penskemediacorp/larva-patterns 1.28.0 → 1.28.1-alpha.141

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/modules/tag-list/README.md

@@ -0,0 +1 @@
+Renders a styled list of tags. Usage is associated with `pmc/term-content` plugin. A thumbnail variant is available to display tags with their corresponding thumbnails.

package/modules/tag-list/tag-list.prototype.js

@@ -0,0 +1,42 @@
+const clonedeep = require( 'lodash.clonedeep');
+
+/**
+ * Larva includes.
+ */
+const c_span = clonedeep( require( '@penskemediacorp/larva-patterns/components/c-span/c-span.prototype' ) );
+
+/* Generate a list of tag titles. */
+const titles = [
+	'Music',
+	'Software Development',
+	'Data Science',
+	'Sustainable Agriculture',
+	'Art',
+	'Digital Marketing Strategies'
+];
+
+/**
+ * Generate a list of `c_span` links.
+ * For demo purposes, append commas to all items except last in array.
+ */
+const tag_list_terms = Array.from( titles, ( title, index ) => ( {
+	c_span: {
+		...c_span,
+		c_span_classes: '',
+		c_span_link_classes: 'lrv-u-font-weight-bold lrv-u-color-black lrv-u-color-brand-primary:hover lrv-a-hover-effect',
+		c_span_text: `${title}${index === titles.length - 1 ? '' : ','}`,
+		c_span_url: `#test-link-${ index + 1 }`,
+	}
+} ) );
+
+module.exports = {
+	tag_list_classes: [
+		'lrv-a-unstyle-list',
+		'lrv-u-display-inline-flex',
+		'lrv-u-flex-wrap-wrap',
+		'lrv-u-flex-direction-row',
+	].join(' '),
+	tag_list_term_item_classes: 'lrv-u-margin-r-025',
+	tag_list_term_classes: '',
+	tag_list_terms,
+};

package/modules/tag-list/tag-list.thumbnail.js

@@ -0,0 +1,49 @@
+const clonedeep    = require( 'lodash.clonedeep' );
+/**
+ * Larva includes.
+ */
+const c_lazy_image = clonedeep( require( '@penskemediacorp/larva-patterns/components/c-lazy-image/c-lazy-image.prototype.js' ) );
+const tag_list     = clonedeep( require( '@penskemediacorp/larva-patterns/modules/tag-list/tag-list.prototype' ) );
+
+/* Update `c_span` styles and add thumbnail. */
+const tag_list_terms = Array.from( tag_list.tag_list_terms, ( term, index ) => ( {
+	...term,
+	c_span: {
+		...term.c_span,
+		c_span_text: term.c_span.c_span_text.replace(/,\s*$/, ''),
+		c_span_classes: [
+			'a-truncate-ellipsis',
+			'lrv-u-color-brand-secondary-dark',
+			'lrv-u-display-block',
+			'lrv-u-font-family-basic',
+			'lrv-u-font-size-13',
+			'lrv-u-text-align-center',
+			'lrv-u-text-transform-uppercase',
+		].join( ' ' ),
+	},
+	o_figure: {
+		...term.o_figure,
+		o_figure_classes: 'lrv-u-margin-b-050',
+		c_lazy_image: {
+			...c_lazy_image,
+			c_lazy_image_img_classes: 'lrv-u-background-color-grey-light lrv-u-border-radius-50p lrv-u-display-block lrv-u-height-auto',
+			c_lazy_image_crop_class: 'lrv-a-crop-1x1',
+			c_lazy_image_classes: 'lrv-u-margin-lr-auto',
+			c_lazy_image_placeholder_url: `https://source.unsplash.com/random/200x200/#${index}`,
+		},
+	},
+} ) );
+
+module.exports = {
+	...tag_list,
+	tag_list_classes: [
+		'lrv-a-cols2',
+		'lrv-a-cols1@tablet',
+		'lrv-a-cols3@desktop',
+		'lrv-a-grid',
+		'lrv-a-unstyle-list',
+	].join( ' ' ),
+	tag_list_term_classes: 'lrv-u-align-items-center lrv-u-flex-direction-column lrv-u-flex-wrap-wrap lrv-u-flex',
+	tag_list_term_item_classes: 'lrv-u-margin-lr-auto lrv-u-width-150 lrv-u-max-width-100p',
+	tag_list_terms,
+};

package/modules/tag-list/tag-list.twig

@@ -0,0 +1,16 @@
+{% if tag_list_terms %}
+	<ul class="tag-list-terms // {{ tag_list_classes }}">
+		{% for term_item in tag_list_terms %}
+		<li class="tag-list-term // {{ tag_list_term_classes }}">
+			<div class="tag-list-term-item // {{ tag_list_term_item_classes }}">
+				{% if term_item['o_figure'] %}
+					{% include "@larva/objects/o-figure/o-figure.twig" with term_item['o_figure'] %}
+				{% endif %}
+				{% if term_item['c_span'] %}
+					{% include "@larva/components/c-span/c-span.twig" with term_item['c_span'] %}
+				{% endif %}
+			</div>
+		</li>
+		{% endfor %}
+	</ul>
+{% endif %}

package/modules/term-content-top/README.md

@@ -0,0 +1 @@
+Renders a styled term content area. Usage is associated with `pmc/term-content` plugin. A `heading-tags` variable is available to render an alternate layout that features a tag list with thumbnails.

package/modules/term-content-top/term-content-top.heading-tags.js

@@ -0,0 +1,14 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+/**
+ * Module includes.
+ */
+const term_content_top = clonedeep( require( './term-content-top.prototype' ) );
+const tag_list         = clonedeep( require( '../../modules/tag-list/tag-list.thumbnail' ) );
+
+term_content_top.o_figure       = '';
+term_content_top.fact_list      = '';
+term_content_top.fact_list_menu = '';
+term_content_top.tag_list       = tag_list
+
+module.exports = term_content_top;

package/modules/term-content-top/term-content-top.prototype.js

@@ -0,0 +1,73 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+/**
+ * Larva includes.
+ */
+const c_tagline       = clonedeep( require( '@penskemediacorp/larva-patterns/components/c-tagline/c-tagline.prototype' ) );
+const o_figure        = clonedeep( require( '@penskemediacorp/larva-patterns/objects/o-figure/o-figure.prototype.js' ) );
+const article_excerpt = clonedeep( require( '@penskemediacorp/larva-patterns/modules/article-excerpt/article-excerpt.prototype' ) );
+const article_title   = clonedeep( require( '@penskemediacorp/larva-patterns/modules/article-title/article-title.prototype' ) );
+const fact_list       = clonedeep( require( '@penskemediacorp/larva-patterns/modules/fact-list/fact-list.prototype' ) );
+const fact_list_menu  = clonedeep( require( '@penskemediacorp/larva-patterns/modules/fact-list-menu/fact-list-menu.prototype' ) );
+
+// Configure page title.
+article_title.article_title_markup = 'Kitchen Appliances';
+article_title.article_title_classes = [
+	'lrv-u-font-family-primary',
+	'lrv-u-font-size-32',
+	'lrv-u-font-size-46@tablet',
+	'lrv-u-line-height-small',
+	'lrv-u-margin-b-00',
+	'lrv-u-padding-tb-075@tablet',
+].join( ' ' );
+
+// Configure tagline.
+c_tagline.c_tagline_text = 'The best products for your kitchen';
+c_tagline.c_tagline_classes = [
+	'lrv-u-font-family-secondary',
+	'lrv-u-font-size-18@mobile-max',
+	'lrv-u-font-size-28',
+	'lrv-u-margin-b-1',
+	'lrv-u-margin-t-00',
+].join( ' ' );
+article_title.c_tagline = c_tagline;
+
+// Begin configuring featured iamge.
+o_figure.o_figure_classes = 'lrv-u-font-family-secondary lrv-u-margin-b-00 lrv-u-width-100p lrv-a-term-content-grid__primary';
+o_figure.c_lazy_image.c_lazy_image_placeholder_url = 'https://source.unsplash.com/random/500x500';
+
+// Configure featured image captions and credit.
+o_figure.c_figcaption.c_figcaption_caption_markup = 'Caption text.';
+o_figure.c_figcaption.c_figcaption_credit_text = 'Photo credit text.';
+o_figure.c_figcaption.c_figcaption_caption_classes = 'lrv-u-font-size-12 lrv-u-font-size-14@tablet';
+o_figure.c_figcaption.c_figcaption_classes = [
+	'lrv-u-flex',
+	'lrv-u-flex-direction-column',
+	'lrv-u-margin-t-050',
+	'lrv-u-padding-b-1',
+].join( ' ' );
+
+o_figure.c_figcaption.c_figcaption_credit_classes = [
+	'lrv-u-color-grey-dark',
+	'lrv-u-font-family-basic',
+	'lrv-u-font-size-10',
+	'lrv-u-font-size-12@mobile-max',
+	'lrv-u-line-height-large',
+].join( ' ' );
+
+article_excerpt.article_excerpt_markup = 'We’ve spent hundreds of hours researching appliances, '
+	+ 'interviewing experts, poring over owner reviews, and testing appliances both large '
+	+ 'and small—many over the course of several years—to find the best appliances for your '
+	+ 'kitchen and home. From dishwashers and refrigerators to vacuums and steam cleaners, '
+	+ 'our experts pick out the right appliances for all kinds of living situations, to '
+	+ 'help keep your chores short and sweet.';
+
+module.exports = {
+	article_excerpt,
+	article_title,
+	fact_list_menu,
+	fact_list,
+	o_figure,
+	term_content_top_classes: 'lrv-u-margin-t-1 lrv-a-term-content-grid',
+	term_content_secondary_classes: 'lrv-a-term-content-grid__secondary',
+};

package/modules/term-content-top/term-content-top.twig

@@ -0,0 +1,22 @@
+<div class="term-content-top // {{ term_content_top_classes }}">
+	{% if o_figure %}
+		{% include "@larva/objects/o-figure/o-figure.twig" with o_figure %}
+	{% endif %}
+	<div class="term-content-detail // {{ term_content_secondary_classes }}">
+		{% if article_title %}
+			{% include "@larva/modules/article-title/article-title.twig" with article_title %}
+		{% endif %}
+		{% if fact_list_menu %}
+			{% include "@larva/modules/fact-list-menu/fact-list-menu.twig" with fact_list_menu %}
+		{% endif %}
+		{% if article_excerpt %}
+			{% include "@larva/modules/article-excerpt/article-excerpt.twig" with article_excerpt %}
+		{% endif %}
+	</div>
+	{% if tag_list %}
+		{% include "@larva/modules/tag-list/tag-list.twig" with tag_list %}
+	{% endif %}
+	{% if fact_list %}
+		{% include "@larva/modules/fact-list/fact-list.twig" with fact_list %}
+	{% endif %}
+</div>

package/objects/o-card/o-card.twig

@@ -5,7 +5,11 @@
 {% endif %}
 
 	{% if o_card_link_url %}
-		<a tabindex="0" href="{{ o_card_link_url }}" class="{{ o_card_link_classes }}">
+		<a tabindex="0" href="{{ o_card_link_url }}" class="{{ o_card_link_classes }}"
+			{% if o_card_link_rel_attribute %}
+				rel="{{ o_card_link_rel_attribute }}"
+			{% endif %}
+		>
 	{% endif %}
 
 	{% if o_card_image_wrap_classes %}

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/objects/o-multiple-product-item/o-multiple-product-item.prototype.js

@@ -0,0 +1,18 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_lazy_image = clonedeep( require( '../../components/c-lazy-image/c-lazy-image.prototype' ) );
+const article_kicker = clonedeep( require( '../../modules/article-kicker/article-kicker.prototype' ) );
+const c_title = clonedeep( require( '../../components/c-title/c-title.prototype' ) );
+const c_link = clonedeep( require( '../../components/c-link/c-link.prototype' ) );
+const c_button = clonedeep( require( '../../components/c-button/c-button.prototype' ) );
+
+c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-1x1';
+
+module.exports = {
+	modifier_class: '',
+	c_lazy_image,
+	article_kicker,
+	c_title,
+	c_link,
+	c_button,
+};

package/objects/o-multiple-product-item/o-multiple-product-item.twig

@@ -0,0 +1,25 @@
+<div class="o-multiple-products-item {{ modifier_class }} {{ o_multiple_products_item_classes }}">
+	<div class="o-multiple-products-item-title-wrapper">
+		{% if c_lazy_image %}
+			{% include "@larva/components/c-lazy-image/c-lazy-image.twig" with c_lazy_image %}
+		{% endif %}
+		{% if article_kicker %}
+			<div class="article_kicker_outer // {{ article_kicker_outer_classes }}">
+				{% include "@larva/modules/article-kicker/article-kicker.twig" with article_kicker %}
+			</div>
+		{% endif %}
+		{% if c_title %}
+			{% include "@larva/components/c-title/c-title.twig" with c_title %}
+		{% endif %}	
+	</div>
+	<div class="o-multiple-products-item-jump-to-link">
+		{% if c_link %}
+			{% include "@larva/components/c-link/c-link.twig" with c_link %}
+		{% endif %}
+	</div>
+	<div class="o-multiple-products-item-button-wrapper">
+		{% if c_button %}
+			{% include "@larva/components/c-button/c-button.twig" with c_button %}
+		{% endif %}
+	</div>
+</div>

package/objects/o-product-card/o-product-card.primary.js

@@ -0,0 +1,9 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const o_product_card = clonedeep( require( './o-product-card.prototype' ) );
+
+o_product_card.o_product_card_classes = 'o-product-card--primary lrv-u-border-a-1@mobile-max lrv-u-border-color-grey-light lrv-u-width-100p';
+o_product_card.o_product_card_header_classes = 'lrv-u-padding-a-025 lrv-u-text-align-center lrv-u-background-color-brand-primary';
+o_product_card.c_title_award.c_title_classes = 'lrv-u-border-a-2 lrv-a-font-secondary-m lrv-u-padding-tb-050';
+
+module.exports = o_product_card;

package/objects/o-product-card/o-product-card.prototype.js

@@ -0,0 +1,60 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_title = clonedeep( require( '@penskemediacorp/larva-patterns/components/c-title/c-title.prototype.js' ) );
+const c_button_prototype = require( '@penskemediacorp/larva-patterns/components/c-button/c-button.brand-basic.js' );
+const c_tagline_prototype = require( '@penskemediacorp/larva-patterns/components/c-tagline/c-tagline.prototype.js' );
+const c_lazy_image_prototype = require( '@penskemediacorp/larva-patterns/components/c-lazy-image/c-lazy-image.prototype.js' );
+const c_dek = clonedeep(
+	require( '@penskemediacorp/larva-patterns/components/c-dek/c-dek.prototype.js' )
+);
+
+c_title.c_title_url = false;
+
+const c_title_award = clonedeep( c_title );
+
+const c_title_brand = clonedeep( c_title );
+const c_lazy_image = clonedeep( c_lazy_image_prototype );
+const c_tagline_product = clonedeep( c_tagline_prototype );
+const c_button_buy = clonedeep( c_button_prototype );
+
+c_dek.c_dek_classes = 'lrv-u-padding-a-075 lrv-u-margin-tb-00 lrv-a-font-secondary-s';
+
+const c_dek_verdict = clonedeep( c_dek );
+const c_dek_pros = clonedeep( c_dek );
+const c_dek_cons = clonedeep( c_dek );
+
+c_title_award.c_title_classes = 'lrv-u-color-white lrv-a-font-secondary-m lrv-u-border-a-2 lrv-u-padding-tb-050';
+
+c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-1x1';
+
+c_title_brand.c_title_text = 'Google';
+c_title_brand.c_title_classes = 'lrv-u-padding-t-1 lrv-a-font-primary-m';
+c_title_brand.c_title_link_classes = 'lrv-a-unstyle-link';
+
+c_tagline_product.c_tagline_classes = 'lrv-u-margin-tb-050 lrv-a-font-secondary-s';
+c_tagline_product.c_tagline_text = 'Smart Thermostat For Home';
+
+c_button_buy.c_button_text = 'Buy Now';
+c_button_buy.c_button_classes =
+	'lrv-u-cursor-pointer lrv-u-padding-tb-025 lrv-u-padding-lr-2 lrv-u-background-color-brand-primary lrv-u-color-black lrv-a-font-secondary-m lrv-u-text-transform-uppercase ';
+
+module.exports = {
+	o_product_card_classes: 'lrv-u-border-a-1',
+	o_product_card_header_classes:
+		'lrv-u-padding-a-025 lrv-u-text-align-center lrv-u-background-color-brand-secondary',
+	o_product_card_details_classes:
+		'lrv-u-text-align-center lrv-u-padding-tb-2 lrv-u-padding-lr-1 lrv-u-flex-grow-1',
+	o_product_card_verdict_classes: 'lrv-u-flex',
+	o_product_card_pros_classes: 'lrv-u-flex',
+	o_product_card_cons_classes: 'lrv-u-flex',
+	o_product_card_link_url: '#',
+	o_product_card_link_classes: 'lrv-a-unstyle-link',
+	c_title_award,
+	c_title_brand,
+	c_lazy_image,
+	c_tagline_product,
+	c_button_buy,
+	c_dek_verdict,
+	c_dek_pros,
+	c_dek_cons,
+};

package/objects/o-product-card/o-product-card.twig

@@ -0,0 +1,64 @@
+<div class="o-product-card {{o_product_card_classes}}">
+	{% if o_product_card_link_url %}
+		<a tabindex="0" href="{{ o_product_card_link_url }}" class="o-product-card__link {{ o_product_card_link_classes }}">
+	{% endif %}
+
+		<div class="o-product-card__award {{o_product_card_header_classes}}">
+			{% if c_title_award %}
+				{% include "@larva/components/c-title/c-title.twig" with c_title_award %}
+			{% endif %}
+		</div>
+
+		<div class="o-product-card__product-details {{o_product_card_details_classes}}">
+			{% if c_lazy_image %}
+				{% include "@larva/components/c-lazy-image/c-lazy-image.twig" with c_lazy_image %}
+			{% endif %}
+
+			{% if c_title_brand %}
+				{% include "@larva/components/c-title/c-title.twig" with c_title_brand %}
+			{% endif %}
+
+			{% if c_tagline_product %}
+				{% include "@larva/components/c-tagline/c-tagline.twig" with c_tagline_product %}
+			{% endif %}
+
+			{% if c_button_buy %}
+				{% include "@larva/components/c-button/c-button.twig" with c_button_buy %}
+			{% endif %}
+		</div>
+
+		<div class="o-product-card__verdict best-of-verdict {{o_product_card_verdict_classes}}" >
+			<div class="o-product-card__header-verdict lrv-a-hidden@desktop lrv-a-font-secondary-m lrv-u-padding-a-075">
+				{{product_grid_header_verdict_text}}
+			</div>
+
+			{% if c_dek_verdict %}
+				{% include "@larva/components/c-dek/c-dek.twig" with c_dek_verdict %}
+			{% endif %}
+		</div>
+
+		<div class="o-product-card__pros best-of-pros {{o_product_card_pros_classes}}" >
+			<div class="o-product-card__header-pros lrv-a-hidden@desktop lrv-a-font-secondary-m lrv-u-padding-a-075">
+				{{product_grid_header_pros_text}}
+			</div>
+
+			{% if c_dek_pros %}
+				{% include "@larva/components/c-dek/c-dek.twig" with c_dek_pros %}
+			{% endif %}
+		</div>
+
+		<div class="o-product-card__cons best-of-cons {{o_product_card_cons_classes}}">
+			<div class="o-product-card__header-cons lrv-a-hidden@desktop lrv-a-font-secondary-m lrv-u-padding-a-075">
+				{{product_grid_header_cons_text}}
+			</div>
+
+			{% if c_dek_cons %}
+				{% include "@larva/components/c-dek/c-dek.twig" with c_dek_cons %}
+			{% endif %}
+		</div>
+
+	{% if o_product_card_link_url %}
+	</a>
+	{% endif %}
+
+</div>

package/objects/o-video-card/o-video-card.twig

@@ -1,5 +1,5 @@
 <div tabindex="0"
-	class="o-video-card__link // {{ o_video_card_link_classes }}" data-video-showcase-trigger="{{ o_video_card_link_showcase_trigger_data_attr }}" data-video-showcase-type="{{ o_video_card_link_showcase_type_data_attr }}" data-video-showcase-dek="{{ o_video_card_link_showcase_dek_data_attr }}" data-video-showcase-title="{{ o_video_card_link_showcase_title_data_attr }}" data-video-showcase-permalink="{{ o_video_card_link_showcase_permalink_data_url }}" data-video-showcase-time="{{ o_video_card_link_showcase_time_data_attr }}">
+	class="o-video-card__link // {{ o_video_card_link_classes }}" data-video-showcase-trigger="{{ o_video_card_link_showcase_trigger_data_attr }}" data-video-showcase-type="{{ o_video_card_link_showcase_type_data_attr }}" data-video-showcase-dek="{{ o_video_card_link_showcase_dek_data_attr }}" data-video-showcase-title="{{ o_video_card_link_showcase_title_data_attr }}" data-video-showcase-permalink="{{ o_video_card_link_showcase_permalink_data_url }}" data-video-showcase-time="{{ o_video_card_link_showcase_time_data_attr }}" data-video-player-id="{{ o_video_card_player_id_attr }}" data-video-media-id="{{ o_video_card_media_id_attr }}">
 
 	<div class="o-video-card {{ modifier_class }} {{ o_video_card_classes }}" data-video-showcase-autoplay="{{ o_video_card_link_showcase_autoplay_data_attr }}" data-video-showcase-player>
 
@@ -22,6 +22,11 @@
 				{% else %}	
 					<div hidden id="jwplayerContainer" data-video-showcase-jwplayer></div>
 				{% endif %}
+				{% if o_video_card_connatix_id_attr %}
+					<div hidden id="{{ o_video_card_connatix_id_attr }}" data-video-showcase-connatix></div>
+				{% else %}
+					<div hidden id="connatixContainer" data-video-showcase-connatix></div>
+				{% endif %}
 
 				<div class="js-VideoShowcasePlayerOembed" hidden data-video-showcase-oembed></div>
 			{% endif %}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@penskemediacorp/larva-patterns",
-  "version": "1.28.0",
+  "version": "1.28.1-alpha.141+22ee9bc5",
   "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.28.0",
-    "@penskemediacorp/larva-js": "^1.28.0",
-    "@penskemediacorp/larva-svg": "^1.28.0",
-    "lodash.clonedeep": "^4.5.0"
+    "@penskemediacorp/larva-css": "^1.28.1-alpha.141+22ee9bc5",
+    "@penskemediacorp/larva-js": "^1.28.1-alpha.141+22ee9bc5",
+    "@penskemediacorp/larva-svg": "^1.28.1-alpha.141+22ee9bc5",
+    "lodash.clonedeep": "^4"
   },
-  "gitHead": "36e335324c72395c8ef8f1d98b204d19b53a23e2"
+  "gitHead": "22ee9bc5c5a423890ac6029ff1cd8da825f83fd9"
 }