@penskemediacorp/larva-patterns 1.10.0-alpha.0 → 1.12.0

package/objects/o-select-nav/o-select-nav.prototype.js

@@ -0,0 +1,17 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_button = clonedeep( require( '../../components/c-button/c-button.prototype' ) );
+const c_select_option = clonedeep( require( '../../components/c-select-option/c-select-option.prototype' ) );
+
+c_button.c_button_text = 'Click Me';
+
+module.exports = {
+	o_select_nav_classes: '',
+	o_select_nav_select_classes: '',
+	c_button: c_button,
+	o_select_nav_options: [
+		c_select_option,
+		c_select_option,
+		c_select_option
+	]
+};

package/objects/o-select-nav/o-select-nav.twig

@@ -0,0 +1,9 @@
+<div class="o-select-nav js-SelectNav js-SelectNav-redirect lrv-a-glue-parent {{ o_select_nav_classes }}">
+	{% include "@larva/components/c-button/c-button.twig" with c_button %}
+
+	<select class="o-select-nav__select js-SelectNav-select lrv-u-cursor-pointer lrv-a-glue lrv-a-glue--t-0 lrv-a-glue--l-0 lrv-u-width-100p lrv-u-height-100p lrv-u-opacity-0 {{ o_select_nav_select_classes }}">
+		{% for item in o_select_nav_options %}
+			{% include "@larva/components/c-select-option/c-select-option.twig" with item %}
+		{% endfor %}
+	</select>
+</div>

package/objects/o-social-list/o-social-list.prototype.js

@@ -1,33 +1,23 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_icon_prototype = require( '../../components/c-icon/c-icon.prototype' );
+
+const social = [ 'instagram', 'pinit', 'twitter', 'facebook', 'youtube' ];
+const o_social_list_icons = [];
+
+for ( let i = 0; i < social.length; i++ ) {
+	let c_icon = clonedeep( c_icon_prototype );
+
+	c_icon.c_icon_url = '#';
+	c_icon.c_icon_name = social[i];
+	c_icon.c_icon_link_classes += ' lrv-u-display-block lrv-u-border-radius-50p lrv-u-color-grey lrv-u-margin-lr-050 lrv-u-padding-a-050 lrv-u-background-color-white lrv-u-color-grey-dark:hover';
+	c_icon.c_icon_rel_name = 'noopener noreferrer';
+
+	o_social_list_icons.push( c_icon );
+}
+
 module.exports = {
-	"o_social_list_classes": "pmc-a-unstyle-list",
-	"o_social_list_icons": [
-		{
-			"c_icon_classes": "c-icon--bubble",
-			"c_icon_name": "facebook",
-			"c_icon_url": "https://www.facebook.com/deadlinehollywood/",
-			"c_icon_link_classes": "pmc-u-background-white pmc-u-padding-a-1 pmc-u-color-brand-red u-display-block u-border-radius-50p u-color-brand-red-dark:hover",
-			"c_icon_rel_name": "noopener noreferrer"
-		},
-		{
-			"c_icon_classes": "c-icon--bubble",
-			"c_icon_name": "twitter",
-			"c_icon_url": "https://twitter.com/DEADLINE",
-			"c_icon_link_classes": "pmc-u-background-white pmc-u-padding-a-1 pmc-u-color-brand-red u-display-block u-border-radius-50p u-color-brand-red-dark:hover",
-			"c_icon_rel_name": "noopener noreferrer"
-		},
-		{
-			"c_icon_classes": "c-icon--bubble",
-			"c_icon_name": "youtube",
-			"c_icon_url": "https://www.youtube.com/user/deadlinecom/",
-			"c_icon_link_classes": "pmc-u-background-white pmc-u-padding-a-1 pmc-u-color-brand-red u-display-block u-border-radius-50p u-color-brand-red-dark:hover",
-			"c_icon_rel_name": "noopener noreferrer"
-		},
-		{
-			"c_icon_classes": "c-icon--bubble",
-			"c_icon_name": "instagram",
-			"c_icon_url": "https://www.instagram.com/deadline/",
-			"c_icon_link_classes": "pmc-u-background-white pmc-u-padding-a-1 pmc-u-color-brand-red u-display-block u-border-radius-50p u-color-brand-red-dark:hover",
-			"c_icon_rel_name": "noopener noreferrer"
-		}
-	]
+	o_social_list_classes: 'lrv-a-unstyle-list',
+	o_social_list_labelledby_attr: '',
+	o_social_list_icons: o_social_list_icons
 };

package/objects/o-social-list/o-social-list.twig

@@ -1,7 +1,15 @@
-<ul class="o-social-list {{ modifier_class }} {{ o_social_list_classes }}">
+<ul class="o-social-list {{ modifier_class }} {{ o_social_list_classes }}"
+	{% if o_social_list_labelledby_attr %}
+		aria-labelledby="{{ o_social_list_labelledby_attr }}"
+	{% endif %}
+>
 	{% for item in o_social_list_icons %}
 		<li class="o-social-list__item {{ o_social_list_item_classes }}">
-			{% include "@larva/components/c-icon/c-icon.twig" with item %}
+			{% if o_social_list_is_icon_button %}
+				{% include "@larva/objects/o-icon-button/o-icon-button.twig" with item %}
+			{% else %}
+				{% include "@larva/components/c-icon/c-icon.twig" with item %}
+			{% endif %}
 		</li>
 	{% endfor %}
 </ul>

package/objects/o-span-group/README.md

@@ -0,0 +1 @@
+`o-span-group` consists of a `div` containing an interderminate numer of `c-span`s. This can be useful for arbitrary decorative borders around single word links, or similar.

package/objects/o-span-group/o-span-group.prototype.js

@@ -0,0 +1,11 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_span = clonedeep( require( '../../components/c-span/c-span.prototype' ) );
+
+module.exports = {
+	o_span_group_classes: '',
+	o_span_group_items: [
+		c_span,
+		c_span
+	]
+};

package/objects/o-span-group/o-span-group.twig

@@ -0,0 +1,5 @@
+<div class="o-span-group {{ o_span_group_classes }}">
+	{% for item in o_span_group_items %}
+		{% include "@larva/components/c-span/c-span.twig" with item %}
+	{% endfor %}
+</div>

package/objects/o-sponsored-by/o-sponsored-by.prototype.js

@@ -1,11 +1,10 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_lazy_image = clonedeep( require( '../../components/c-lazy-image/c-lazy-image.prototype' ) );
+
 module.exports = {
-	"o_sponsored_by_classes": "u-flex u-align-items-center",
-	"o_sponsored_by_title_classes": "pmc-u-color-grey-medium pmc-u-font-family-georgia pmc-u-font-size-10 pmc-u-margin-r-050",
-	"o_sponsored_by_text": "Sponsored by",
-	"o_figure": {
-		"o_figure_classes": "u-width-50",
-		"o_figure_permalink_url": "#",
-		"o_figure_alt_text": "Thumbnail image",
-		"o_figure_image_url": "https://picsum.photos/57/11"
-	}
-}
+	o_sponsored_by_classes: 'lrv-u-flex lrv-u-align-items-center',
+	o_sponsored_by_title_classes: 'lrv-u-font-size-14 lrv-u-margin-r-050 lrv-u-font-style-italic',
+	o_sponsored_by_text: 'Sponsored by',
+	c_lazy_image: c_lazy_image
+};

package/objects/o-sponsored-by/o-sponsored-by.twig

@@ -1,7 +1,7 @@
 <div class="o-sponsored-by {{ modifier_class }} {{ o_sponsored_by_classes }}">
 	<span class="{{ o_sponsored_by_title_classes }}">{{ o_sponsored_by_text }}</span>
 
-	{% if o_figure %}
-		{% include "@larva/objects/o-figure/o-figure.twig" with o_figure %}
+	{% if c_lazy_image %}
+		{% include "@larva/components/c-lazy-image/c-lazy-image.twig" with c_lazy_image %}
 	{% endif %}
 </div>

package/objects/o-story-arc-item/o-story-arc-item.prototype.js

@@ -0,0 +1,29 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_timestamp_prototype = require( '../../components/c-timestamp/c-timestamp.prototype' );
+const o_tease_prototype = require( '../o-tease/o-tease.prototype.js' );
+
+const c_timestamp = clonedeep( c_timestamp_prototype );
+const o_tease = clonedeep( o_tease_prototype );
+
+c_timestamp.c_timestamp_classes = "lrv-u-font-family-primary lrv-u-background-color-body lrv-u-font-weight-bold lrv-u-font-size-12 lrv-u-color-brand-primary";
+
+o_tease.c_tagline = false;
+o_tease.c_heading = false;
+o_tease.c_button = false;
+o_tease.c_span = false;
+
+o_tease.o_tease_classes += ' u-align-items-flex-start@mobile-max u-flex-direction-row-reverse';
+o_tease.o_tease_secondary_classes += ' lrv-u-margin-r-1 u-width-65';
+
+o_tease.c_lazy_image.c_lazy_image_img_classes += ' lrv-u-border-radius-5 u-box-shadow-light';
+o_tease.c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-1x1';
+
+o_tease.c_title.c_title_text = 'Art Basel Plans ‘Interventions’ for 50th Anniversary, with Kasper König in Charge';
+o_tease.c_title.c_title_classes = 'lrv-u-font-family-primary lrv-u-font-size-14 lrv-u-font-size-16@desktop u-color-black lrv-u-font-weight-normal';
+
+module.exports = {
+	o_story_arc_item_classes: '',
+	c_timestamp: c_timestamp,
+	o_tease: o_tease,
+};

package/objects/o-story-arc-item/o-story-arc-item.twig

@@ -0,0 +1,9 @@
+<div class="{{ o_story_arc_item_classes }}">
+	<span class="a-span-sandwich lrv-u-margin-b-1">
+		{% if c_timestamp %}
+			{% include "@larva/components/c-timestamp/c-timestamp.twig" with c_timestamp %}
+		{% endif %}
+	</span>
+
+	{% include "@larva/objects/o-tease/o-tease.twig" with o_tease %}
+</div>

package/objects/o-sub-header/o-sub-header.prototype.js

@@ -0,0 +1,39 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_heading_prototype = require( '@penskemediacorp/larva-patterns/components/c-heading/c-heading.prototype.js' );
+const c_heading = clonedeep( c_heading_prototype );
+
+const o_nav_prototype = require( '@penskemediacorp/larva-patterns/objects/o-nav/o-nav.prototype' );
+const o_nav = clonedeep( o_nav_prototype );
+
+const o_nav_items_c_links__prototype = require( '@penskemediacorp/larva-patterns/components/c-link/c-link.prototype.js' );
+
+c_heading.c_heading_text = 'Market';
+c_heading.c_heading_classes = 'lrv-u-font-family-secondary lrv-u-font-size-56@desktop-xl lrv-u-font-size-50 lrv-u-margin-b-050@mobile-max lrv-u-line-height-small lrv-u-text-align-center@mobile-max lrv-u-margin-r-2@desktop';
+c_heading.c_heading_is_primary_heading = true;
+
+o_nav.o_nav_list_items = [];
+const menuLinks = [ 'View All', 'Tag Title', 'Tag Title', 'Tag Title', 'Tag Title', 'Tag Title' ];
+
+for (let i = 0; i < menuLinks.length; i++) {
+	let c_link = clonedeep( o_nav_items_c_links__prototype );
+
+	c_link.c_link_text = menuLinks[i];
+	c_link.c_link_classes += ' c_link_classes lrv-u-font-family-primary lrv-u-color-grey-dark:hover';
+
+	o_nav.o_nav_list_items.push( c_link );
+}
+
+const mobileDropdownUtilities = ' lrv-u-border-a-1@mobile-max lrv-u-justify-content-center lrv-u-margin-b-050@mobile-max lrv-u-border-color-grey-light';
+
+o_nav.o_nav_classes = 'lrv-u-flex@desktop lrv-u-align-items-center lrv-u-text-align-center lrv-js-MobileHeightToggle';
+o_nav.o_nav_title_text = 'View Categories';
+o_nav.o_nav_title_classes = 'lrv-a-hidden@desktop lrv-js-MobileHeightToggle-trigger lrv-a-icon-after lrv-a-icon-arrow-down lrv-u-font-size-16 lrv-u-font-family-primary lrv-u-font-weight-normal lrv-u-padding-tb-050 lrv-u-width-100p@mobile-max ' + mobileDropdownUtilities;
+o_nav.o_nav_list_classes += ' lrv-js-MobileHeightToggle-target lrv-u-flex lrv-u-flex-direction-column@mobile-max  lrv-u-line-height-large lrv-u-flex-wrap-wrap lrv-a-space-children--1 lrv-a-space-children-horizontal@tablet';
+o_nav.o_nav_list_item_classes = mobileDropdownUtilities;
+
+module.exports = {
+	o_sub_header_classes: 'lrv-u-flex u-align-items-flex-end@tablet lrv-u-flex-direction-column@mobile-max',
+	c_heading: c_heading,
+	o_nav: o_nav,
+};

package/objects/o-sub-header/o-sub-header.twig

@@ -0,0 +1,9 @@
+<header class="o-sub-header // {{ o_sub_header_classes }}">
+	{% if c_heading %}
+		{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
+	{% endif %}
+
+	{% if o_nav %}
+		{% include "@larva/objects/o-nav/o-nav.twig" with o_nav %}
+	{% endif %}
+</header>

package/objects/o-tease/o-tease.prototype.js

@@ -1,22 +1,26 @@
+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_tagline = clonedeep( require( '../../components/c-tagline/c-tagline.prototype' ) );
+const c_heading = clonedeep( require( '../../components/c-heading/c-heading.prototype' ) );
+
+c_title.c_title_url = false;
+
+c_heading.c_heading_url = false;
+
+c_lazy_image.c_lazy_image_link_url = false;
+c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-3x2';
+c_lazy_image.c_lazy_image_alt_attr = 'Post tease thumbnail image';
+
 module.exports = {
-	"o_tease_url": "#",
-	"o_tease_primary_classes": "",
-	"o_tease_secondary_classes": "",
-	"c_heading": {
-		"c_heading_text": "Breaking News",
-		"c_heading_classes": "pmc-u-font-family-balto pmc-u-font-size-20 pmc-u-font-weight-bold u-font-style-italic"
-	},
-	"c_title": {
-		"c_title_text": "here is title text from o-tease.json"
-	},
-	"c_tagline": {
-		"c_tagline_classes": "",
-		"c_tagline_markup": "here is title text from o-tease.json"
-	},
-	"o_figure": {
-		"o_figure_crop_class": "pmc-u-crop-2x3",
-		"o_figure_alt_attr": "Thumbnail image",
-		"o_figure_image_url": "https://picsum.photos/100/100",
-		"o_figure_caption_text": "Here in o-tease"
-	}
+	o_tease_url: '#',
+	o_tease_classes: 'lrv-u-flex lrv-u-align-items-center',
+	o_tease_link_classes: 'lrv-u-display-contents',
+	o_tease_primary_classes: 'lrv-u-flex-grow-1',
+	o_tease_secondary_classes: 'lrv-u-flex-shrink-0 lrv-u-width-30p',
+	c_heading: c_heading,
+	c_title: c_title,
+	c_tagline: c_tagline,
+	c_lazy_image: c_lazy_image
 };

package/objects/o-tease/o-tease.twig

@@ -5,9 +5,13 @@
 {% endif %}
 
 	{% if o_tease_url %}
-		<a href="{{ o_tease_url }}" class="u-display-contents {{ o_tease_url_classes }}">
+		<a href="{{ o_tease_url }}" class="{{ o_tease_link_classes }}">
 	{% endif %}
 		<div class="o-tease__primary {{ o_tease_primary_classes }}">
+			{% if c_span %}
+				{% include "@larva/components/c-span/c-span.twig" with c_span %}
+			{% endif %}
+
 			{% if c_heading %}
 				{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
 			{% endif %}
@@ -29,9 +33,9 @@
 			{% endif %}
 		</div>
 
-		{% if o_figure %}
+		{% if c_lazy_image %}
 		<div class="o-tease__secondary {{ o_tease_secondary_classes }}">
-			{% include "@larva/objects/o-figure/o-figure.twig" with o_figure %}
+			{% include "@larva/components/c-lazy-image/c-lazy-image.twig" with c_lazy_image %}
 		</div>
 		{% endif %}
 

package/objects/o-tease-list/o-tease-list.prototype.js

@@ -1,26 +1,14 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const o_tease = clonedeep( require( '../o-tease/o-tease.prototype' ) );
+
 module.exports = {
-	"o_tease_list_classes": "pmc-a-unstyle-list",
-	"o_tease_list_items": [
-		{
-			"c_title": {
-				"c_title_text": "Story list item 1"
-			},
-			"o_figure": {
-				"o_figure_crop_class": "pmc-a-crop-16x9",
-				"o_figure_alt_attr": "Thumbnail image",
-				"o_figure_image_url": "https://picsum.photos/200/300"
-			}
-		},
-		{
-			"c_title": {
-				"c_title_text": "Story list item 2"
-			},
-			"o_figure": {
-				"o_figure_crop_class": "pmc-a-crop-16x9",
-				"o_figure_permalink_url": "https://notlaura.com",
-				"o_figure_alt_attr": "Thumbnail image",
-				"o_figure_image_url": "https://picsum.photos/300/300"
-			}
-		}
+	o_tease_list_classes: 'lrv-a-unstyle-list',
+	o_tease_list_labelledby_attr: '',
+	o_tease_list_item_classes: '',
+	o_tease_list_items: [
+		o_tease,
+		o_tease,
+		o_tease
 	]
-}
+};

package/objects/o-tease-list/o-tease-list.twig

@@ -1,4 +1,8 @@
-<ul class="o-tease-list {{ modifier_class }} {{ o_tease_list_classes }}">
+<ul class="o-tease-list {{ modifier_class }} {{ o_tease_list_classes }}"
+	{% if o_tease_list_labelledby_attr %}
+		aria-labelledby="{{ o_tease_list_labelledby_attr }}"
+	{% endif %}
+>
 	{% for item in o_tease_list_items %}
 		<li class="o-tease-list__item {{ o_tease_list_item_classes }}">
 			{% include "@larva/objects/o-tease/o-tease.twig" with item %}

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

@@ -0,0 +1,45 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_play_icon_prototype = require( '../../components/c-play-badge/c-play-badge.prototype.js' );
+const c_play_icon = clonedeep( c_play_icon_prototype );
+
+const o_indicator_prototype = require( '../o-indicator/o-indicator.prototype.js' );
+const o_indicator = clonedeep( o_indicator_prototype );
+
+const c_heading_prototype = require( '../../components/c-heading/c-heading.prototype.js' );
+const c_heading = clonedeep( c_heading_prototype );
+
+const c_span_prototype = require( '../../components/c-span/c-span.prototype.js' );
+const c_span = clonedeep( c_span_prototype );
+
+const c_dek_prototype = require( '../../components/c-dek/c-dek.prototype.js' );
+const c_dek = clonedeep( c_dek_prototype );
+
+c_play_icon.c_play_badge_classes = 'lrv-a-glue lrv-a-glue--b-0 u-transform-translate-a-n50p u-width-55 u-height-55 is-to-be-hidden';
+c_play_icon.c_play_badge_background_fill_classes = 'lrv-u-background-color-transparent';
+
+o_indicator.o_indicator_classes = 'lrv-u-margin-b-025 u-margin-t-050@tablet';
+
+c_dek.c_dek_classes = 'lrv-u-display-none js-VideoShowcasePlayerDek';
+
+module.exports = {
+    o_video_card_permalink_url: "#single_url",
+    o_video_card_alt_attr: "Thumbnail image",
+    o_video_card_image_url: "https://source.unsplash.com/random/595x333",
+    o_video_card_lazy_image_url: 'https://source.unsplash.com/random/595x333',
+    o_video_card_caption_text: "Here is some caption text",
+    o_video_card_link_showcase_trigger_data_attr: "<div class='embed-youtube'><iframe title='Spring - Blender Open Movie' width='500' height='281' src='https://www.youtube.com/embed/WhWc3b3KhnY?feature=oembed&autoplay=1&mute=1' frameborder='0' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen=''></iframe></div>",
+    o_video_card_link_showcase_type_data_attr: "oembed",
+    o_video_card_link_showcase_permalink_data_url: "#url_test",
+    modifier_class: "",
+    o_video_card_classes: 'u-background-color-picked-bluewood u-margin-r-1@tablet lrv-u-justify-content-space-between',
+    o_video_card_crop_class: "lrv-a-crop-16x9 lrv-a-glue-parent c-play-badge-parent",
+    o_video_card_image_classes: "is-to-be-hidden lrv-u-display-block",
+    o_video_card_is_player: true,
+    c_label: "",
+    o_video_card_crop_data_attr: "",
+    o_video_card_meta_classes: 'lrv-u-flex lrv-u-flex-direction-column lrv-u-width-100p u-padding-lr-075@mobile-max lrv-u-padding-tb-050 u-position-relative',
+    o_video_card_link_classes: 'lrv-u-width-100p',
+    o_video_card_permalink_classes: 'u-margin-r-050@mobile-max',
+    c_play_icon,
+};

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

@@ -0,0 +1,67 @@
+<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 }}">
+
+	<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>
+
+		{% if o_video_card_crop_class %}
+		<div class="{{ o_video_card_crop_class }}" data-video-showcase-active-text="{{ o_video_card_crop_data_attr }}">
+			{% endif %}
+
+			{% if o_video_card_permalink_url %}
+			<a href="{{ o_video_card_permalink_url }}" class="{{ o_video_card_permalink_classes }}">
+				{% endif %}
+				<img class="o-video-card__image {{ o_video_card_image_classes }}" data-lazy-src="{{ o_video_card_image_url }}" src="{{ o_video_card_lazy_image_url }}" alt="{{ o_video_card_alt_attr }}">
+				{% if o_video_card_permalink_url %}
+			</a>
+			{% endif %}
+
+			{% if o_video_card_is_player %}
+				<iframe class="js-VideoShowcasePlayerIframe" title="video" hidden frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen" data-video-showcase-iframe></iframe>
+				{% if o_video_card_id_attr %}
+					<div hidden id="{{ o_video_card_id_attr }}" data-video-showcase-jwplayer></div>
+				{% else %}	
+					<div hidden id="jwplayerContainer" data-video-showcase-jwplayer></div>
+				{% endif %}
+
+				<div class="js-VideoShowcasePlayerOembed" hidden data-video-showcase-oembed></div>
+			{% endif %}
+
+			{% if c_play_icon %}
+				{% if o_video_card_permalink_url %}
+					<a href="{{ o_video_card_permalink_url }}">
+				{% endif %}
+				{% include "@larva/components/c-play-badge/c-play-badge.twig" with c_play_icon %}
+				{% if o_video_card_permalink_url %}
+					</a>
+				{% endif %}
+			{% endif %}
+
+			{% if o_video_card_crop_class %}
+		</div>
+		{% endif %}
+
+		<div class="o-video-card__meta // {{ o_video_card_meta_classes }}">
+			{% if o_indicator %}
+				{% include "@larva/objects/o-indicator/o-indicator.twig" with o_indicator %}
+			{% endif %}
+
+			{% if o_category_link %}
+				{% include "@larva/objects/o-category-link/o-category-link.twig" with o_category_link %}
+			{% endif %}
+
+			{% if c_heading %}
+				{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
+			{% endif %}
+
+			{% if c_dek %}
+				{% include "@larva/components/c-dek/c-dek.twig" with c_dek %}
+			{% endif %}
+
+			{% if c_span %}
+				{% include "@larva/components/c-span/c-span.twig" with c_span %}
+			{% endif %}
+		</div>
+
+	</div>
+
+</div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@penskemediacorp/larva-patterns",
-  "version": "1.10.0-alpha.0",
+  "version": "1.12.0",
   "description": "Larva markup patterns.",
   "author": "laras126 <laras126@gmail.com>",
   "homepage": "https://github.com/Penske-Media-Corp/pmc-larva/tree/master/packages/patterns#readme",
@@ -20,13 +20,10 @@
     "url": "https://github.com/Penske-Media-Corp/pmc-larva/issues"
   },
   "dependencies": {
-    "@penskemediacorp/larva": "^1.10.0-alpha.0",
-    "@penskemediacorp/larva-css": "^1.10.0-alpha.0",
-    "@penskemediacorp/larva-js": "^1.10.0-alpha.0",
-    "@penskemediacorp/larva-svg": "^1.7.0-alpha.0"
+    "@penskemediacorp/larva-css": "^1.11.0",
+    "@penskemediacorp/larva-js": "^1.10.0",
+    "@penskemediacorp/larva-svg": "^1.10.0",
+    "lodash.clonedeep": "^4.5.0"
   },
-  "devDependencies": {
-    "stylelint": "^10.1.0"
-  },
-  "gitHead": "b5be68c48f8238f421e6521abfe46eca18d51781"
+  "gitHead": "095df04802953f0c9efdc467043c75896613f9ff"
 }

package/pattern.html

@@ -1,16 +1,68 @@
 {% extends "base.html" %}
 
 {% block content %}
-	<div class="pmc-u-display-none">
-		{{ sprite_data|raw }}
-	</div>
-	<div class="pmc-u-background-grey-light">
-		<h1 class="pmc-u-font-family-basic pmc-u-padding-a-1 pmc-u-margin-a-00">{{ source ~ ' ' ~ type ~ ': ' ~ name }}</h1>
-	</div>
+	{% if 'components' == type or 'modules' == type or 'objects' == type %}
+		{% set ext = '.twig' %}
+	{% else %}
+		{% set ext = '.html' %}
+	{% endif %}
+
+	{% set path = type ~"/" ~ name ~ "/" ~ name ~ ext %}
+
+	<header class="lrv-u-background-color-grey-light lrv-u-padding-a-1  js-LarvaUiToggle-panel">
+		<h1 class="lrv-u-font-family-basic lrv-u-margin-a-00">{{ source ~ ' ' ~ type ~ ': ' }}<code>{{ name  }}{{ variant ? '.' ~ variant }}</code></h1>
+		<div class="lrv-u-flex lrv-u-align-items-center lrv-a-space-children-horizontal lrv-a-space-children--1">
+			<h2>Available Variants</h2>
+			{% for item in variants %}
+				{% set slug = item == 'prototype' ? '' : item %}
+				{% set link = "/" ~ source ~ "/" ~ type ~ "/" ~ name ~ "/" ~ slug %}
+				{% set current_class = variant == item ? 'lrv-u-background-color-brand-primary lrv-u-color-white lrv-u-color-white:hover' : '' %}
+
+				<a href="{{ link }}" class="lrv-u-padding-a-050 {{ current_class }}">{{ item }}</a>
+			{% endfor %}
+		</div>
+	</header>
+
+	{% if data.error %}
+		<div class="lrv-a-wrapper">
+			<h2 style="color: red;">
+				{{ data.message|raw }}
+			</h2>
+			<code>{{ data.error.message }}</code>
+			<pre>
+				{{ data.error.stack }}
+			</pre>
+		</div>
+	{% else %}
+		{% include path with data %}
+	{% endif %}
+
+	<div class="lrv-u-background-color-grey-light lrv-a-grid lrv-u-font-size-12 lrv-u-border-t-1 lrv-u-border-color-grey lrv-u-padding-a-2 js-LarvaUiToggle-panel">
+		<details>
+			<summary class="lrv-u-font-size-24 lrv-u-cursor-pointer"><code>{{ name }}</code> README</summary>
+			<div class="lrv-u-padding-a-1 lrv-u-background-color-white lrv-u-font-size-16">
+				{{ source( "@" ~ source ~ "/" ~ type ~"/" ~ name ~ "/" ~ 'README.md', true )|markdown|raw }}
+			</div>
+		</details>
+		<details>
+			{% if type == 'one-offs' %}
+				<summary class="lrv-u-font-size-24 lrv-u-cursor-pointer"><code>{{ name }}</code> HTML <small class="lrv-u-font-size-16">Dummy HTML for development.</small></summary>
+			{% else %}
+				<summary class="lrv-u-font-size-24 lrv-u-cursor-pointer"><code>{{ name }}</code> Twig <small class="lrv-u-font-size-16">The markup file.</small></summary>
+			{% endif %}
+
+			<pre class="lrv-a-wrapper language-twig"><code>{{ source( path )|escape }}</code></pre>
+		</details>
+
+		{% if type != 'algorithms' %}
+			<details>
+				<summary class="lrv-u-font-size-24 lrv-u-cursor-pointer"><code>{{ name }}{{ variant ? '.' ~ variant }}</code> JSON <small class="lrv-u-font-size-16">The data object for this pattern.</small></summary>
+				<pre class="lrv-a-wrapper language-json"><code>{{ json_pretty|raw }}</code></pre>
+			</details>
+		{% endif %}
 
-	{% include "@" ~ source ~ "/" ~ type ~"/" ~ name ~ "/" ~ name ~ ".twig" with data %}
+		{% if type == 'algorithms' %}
 
-	<div class="pmc-u-background-grey-light pmc-a-grid pmc-u-font-size-12 pmc-u-border-t-1 pmc-u-border-color-grey pmc-u-padding-a-2">
-		<pre class="pmc-a-wrapper language-json"><code>{{ json_pretty|raw }}</code></pre>
+		{% endif %}
 	</div>
 {% endblock %}

package/style-guide/colors.html

@@ -0,0 +1,33 @@
+<section>
+	<h2 style="background-color: whitesmoke;" class="lrv-u-padding-a-1 lrv-u-margin-b-2">Text Colors</h2>
+	<div class="lrv-a-grid lrv-a-cols3 lrv-a-cols4@tablet lrv-u-margin-tb-1">
+		{% for class in colors.color %}
+			<div class="lrv-u-flex lrv-u-flex-direction-column">
+				<strong class="lrv-u-width-100 {{ class }}">Here is some text</strong>
+				<p><code>.{{ class }}</code></p>
+			</div>
+		{% endfor %}
+	</div>
+</section>
+<section>
+	<h2 style="background-color: whitesmoke;" class="lrv-u-padding-a-1 lrv-u-margin-b-2">Border Colors</h2>
+	<div class="lrv-a-grid lrv-a-cols3 lrv-a-cols4@tablet lrv-u-margin-tb-1">
+		{% for class in colors['border-color'] %}
+			<div class="lrv-u-flex lrv-u-flex-direction-column">
+				<div class="lrv-u-width-100 lrv-u-padding-a-025 lrv-u-border-a-3 {{ class }}"></div>
+				<p><code>.{{ class }}</code></p>
+			</div>
+		{% endfor %}
+	</div>
+</section>
+<section>
+	<h2 style="background-color: whitesmoke;" class="lrv-u-padding-a-1 lrv-u-margin-b-2">Background Colors</h2>
+	<div class="lrv-a-grid lrv-a-cols3 lrv-u-margin-tb-1">
+		{% for class in colors['background-color'] %}
+			<div class="lrv-u-flex lrv-u-flex-direction-column">
+				<div class="lrv-u-width-100 lrv-u-border-a-1 lrv-u-padding-a-1 {{ class }}"></div>
+				<p><code>.{{ class }}</code></p>
+			</div>
+		{% endfor %}
+	</div>
+</section>