@penskemediacorp/larva-patterns 1.0.2-alpha.0 → 1.1.2

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>

package/objects/o-account-menu/o-account-menu.prototype.js

@@ -0,0 +1,35 @@
+const clonedeep = require('lodash.clonedeep');
+
+const c_link_prototype = require('../../components/c-link/c-link.prototype');
+const c_span_prototype = require('../../components/c-span/c-span.prototype');
+
+const c_welcome_span = clonedeep(c_span_prototype);
+c_welcome_span.c_span_classes = 'subscriber-name lrv-a-font-body lrv-u-color-black lrv-u-font-size-12 lrv-u-text-transform-uppercase';
+c_welcome_span.c_span_text = 'Welcome Name';
+c_welcome_span.c_span_link_classes = 'lrv-u-color-black lrv-u-color-brand-primary:hover';
+c_welcome_span.c_span_url = '#';
+
+const c_account_link = clonedeep(c_link_prototype);
+c_account_link.c_link_text = 'Account';
+c_account_link.c_link_classes = 'subscriber-account-link lrv-u-font-family-body lrv-u-font-size-12 lrv-u-font-size-8@mobile-max lrv-a-icon-after lrv-a-icon-arrow-down lrv-a-unstyle-link lrv-u-border-b-1 lrv-u-border-color-brand-primary:hover lrv-u-border-color-white lrv-u-color-brand-primary:hover lrv-u-text-transform-uppercase';
+
+const c_manage_account = clonedeep(c_link_prototype);
+c_manage_account.c_link_text = 'Manage Account';
+c_manage_account.c_link_classes = 'subscriber-self-care-link lrv-u-text-transform-uppercase lrv-a-font-secondary lrv-u-color-black lrv-u-font-size-12 lrv-u-width-100 lrv-u-text-align-center lrv-u-color-brand-primary:hover';
+
+const c_log_out = clonedeep(c_link_prototype);
+c_log_out.c_link_text = 'Sign Out';
+c_log_out.c_link_classes = 'subscriber-logout-link lrv-a-font-secondary lrv-u-color-black lrv-u-color-brand-primary:hover lrv-u-font-size-12 lrv-u-text-transform-uppercase';
+
+module.exports = {
+	o_account_menu_classes: 'js-Tooltip-parent lrv-a-glue-parent lrv-u-flex',
+	o_account_content_classes: 'js-Tooltip lrv-a-glue lrv-a-glue--t-100p lrv-u-box-shadow-medium',
+	o_account_content_inner_classes: 'lrv-a-glue-parent lrv-a-icon-after-arrow-top-left lrv-u-background-color-white lrv-u-border-a-2 lrv-u-flex lrv-u-flex-direction-column lrv-u-text-align-left lrv-u-flex-wrap-wrap lrv-u-margin-t-1 lrv-u-padding-tb-050 lrv-u-padding-lr-150 lrv-u-width-200',
+	o_account_welcome_span_classes: 'lrv-u-border-b-1 lrv-u-padding-tb-050',
+	o_account_manage_account_classes: 'lrv-u-border-b-1 lrv-u-padding-tb-050',
+	o_account_logout_classes: 'lrv-u-padding-tb-050',
+	c_welcome_span,
+	c_account_link,
+	c_manage_account,
+	c_log_out,
+};

package/objects/o-account-menu/o-account-menu.twig

@@ -0,0 +1,25 @@
+<div class="o-account-menu //  {{ o_account_menu_classes }}">
+	{% include "@larva/components/c-link/c-link.twig" with c_account_link %}
+	<div class="o-account-content // {{ o_account_content_classes }}">
+		<div class="o-account-content-inner // {{ o_account_content_inner_classes }}">
+
+			{% if c_welcome_span %}
+				<div class="o-account-welcome-span-link // {{ o_account_welcome_span_classes }} ">
+					{% include "@larva/components/c-span/c-span.twig" with c_welcome_span %}
+				</div>
+			{% endif %}
+
+			{% if c_manage_account %}
+				<div class="o-account-manage-account-link // {{ o_account_manage_account_classes }} ">
+					{% include "@larva/components/c-link/c-link.twig" with c_manage_account %}
+				</div>
+			{% endif %}
+
+			{% if c_log_out %}
+				<div class="o-account-logout-link // {{ o_account_logout_classes }} ">
+					{% include "@larva/components/c-link/c-link.twig" with c_log_out %}
+				</div>
+			{% endif %}
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,13 @@
+const { __experimentalCloneWithFallback } = require( '@penskemediacorp/larva' );
+
+const c_span = __experimentalCloneWithFallback( 'components/c-span/c-span.prototype' );
+const c_timestamp = __experimentalCloneWithFallback( 'components/c-timestamp/c-timestamp.prototype' );
+
+c_span.c_span_text = 'Author Name';
+
+module.exports = {
+	o_author_classes: 'lrv-a-font-secondary-regular-m',
+	o_author_text: 'By ',
+	c_span: c_span,
+	c_timestamp: c_timestamp
+};

package/objects/o-author/o-author.twig

@@ -0,0 +1,13 @@
+<div class="o-author // {{ o_author_classes }}">
+
+	<span class="{{ o_author_by_classes }}">{{ o_author_text }}</span>
+
+	{% if c_span %}
+		{% include "@larva/components/c-span/c-span.twig" with c_span %}
+	{% endif %}
+
+	{% if c_timestamp %}
+		{% include "@larva/components/c-timestamp/c-timestamp.twig" with c_timestamp %}
+	{% endif %}
+
+</div>

package/objects/o-card/README.md

@@ -0,0 +1 @@
+`o-card` is a pattern generally used for a story or article that features a vertical layout. It is a very flexible pattern that includes several options for included components. The order of these can be modified to some extent using flex and `order` utilities, but developers should try to avoid modifying the display order in a way that could impact the experience for users using the keyboard.

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

@@ -0,0 +1,25 @@
+const clonedeep = require( 'lodash.clonedeep' );
+const { __experimentalCloneWithFallback } = require( '@penskemediacorp/larva' );
+
+const c_span = __experimentalCloneWithFallback( 'components/c-span/c-span.tag' );
+const c_timestamp = __experimentalCloneWithFallback( 'components/c-timestamp/c-timestamp.prototype' );
+const c_lazy_image = clonedeep( require( '../../components/c-lazy-image/c-lazy-image.prototype.js' ) );
+const c_title = clonedeep( require( '../../components/c-title/c-title.prototype.js' ) );
+
+module.exports = {
+	o_card_classes: '',
+	o_card_tag_text: '',
+	o_card_link_url: '',
+	o_card_link_classes: '',
+	o_card_image_wrap_classes: '',
+	o_card_content_classes: '',
+	c_lazy_image: c_lazy_image,
+	c_svg: false,
+	c_span: c_span,
+	c_tagline: false,
+	c_title: c_title,
+	c_timestamp: c_timestamp,
+	o_author: false,
+	article_kicker:false,
+	article_kicker_outer_classes:'',
+};

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

@@ -0,0 +1,75 @@
+{% if o_card_tag_text %}
+<{{ o_card_tag_text }} class="o-card {{ modifier_class }} {{ o_card_classes }}">
+{% else %}
+<article class="o-card {{ modifier_class }} {{ o_card_classes }}">
+{% endif %}
+
+	{% if o_card_link_url %}
+		<a tabindex="0" href="{{ o_card_link_url }}" class="{{ o_card_link_classes }}">
+	{% endif %}
+
+	{% if o_card_image_wrap_classes %}
+	<div class="o-card__image-wrap {{ o_card_image_wrap_classes }}">
+		{% endif %}
+
+		{% 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 %}
+
+		{% if o_card_image_wrap_classes %}
+	</div>
+	{% endif %}
+
+	<div class="o-card__content {{ o_card_content_classes }}">
+		{% if o_span_group %}
+			{% include "@larva/objects/o-span-group/o-span-group.twig" with o_span_group %}
+		{% endif %}
+
+		{% if c_svg %}
+			{% include "@larva/components/c-svg/c-svg.twig" with c_svg %}
+		{% 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_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_timestamp %}
+			{% include "@larva/components/c-timestamp/c-timestamp.twig" with c_timestamp %}
+		{% endif %}
+
+		{% if c_dek %}
+			{% include "@larva/components/c-dek/c-dek.twig" with c_dek %}
+		{% endif %}
+
+		{% if c_tagline %}
+			{% include "@larva/components/c-tagline/c-tagline.twig" with c_tagline %}
+		{% endif %}
+
+		{% if o_author %}
+			{% include "@larva/objects/o-author/o-author.twig" with o_author %}
+		{% endif %}
+	</div>
+
+	{% if o_card_link_url %}
+	</a>
+	{% endif %}
+
+{% if o_card_tag_text %}
+</{{ o_card_tag_text }}>
+{% else %}
+</article>
+{% endif %}

package/objects/o-card-list/README.md

@@ -0,0 +1,3 @@
+`o-card-list` is a simple wrapping patttern for displaying a list of `o-card`s. This pattern is only necessary when semantic list elements are useful, or when a storing classes in a central place for the `li` wrapping element is useful.
+
+A future improvement to this pattern would be an option for an `ol` since many of the card lists will be ordered chronologically.

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

@@ -0,0 +1,13 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const o_card = clonedeep( require( '../o-card/o-card.prototype' ) );
+
+module.exports = {
+	o_card_list_classes: 'lrv-a-unstyle-list',
+	o_card_list_item_classes: '',
+	o_card_list_items: [
+		o_card,
+		o_card,
+		o_card
+	]
+};

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

@@ -0,0 +1,7 @@
+<ul class="o-card-list {{ modifier_class }} {{ o_card_list_classes }}">
+	{% for item in o_card_list_items %}
+		<li class="o-card-list__item {{ o_card_list_item_classes }}">
+			{% include "@larva/objects/o-card/o-card.twig" with item %}
+		</li>
+	{% endfor %}
+</ul>

package/objects/o-checkbox-input-list/o-checkbox-input-list.prototype.js

@@ -0,0 +1,16 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_title = clonedeep( require( '../../components/c-title/c-title.prototype' ) );
+const c_checkbox_input = clonedeep( require( '../../components/c-checkbox-input/c-checkbox-input.prototype' ) );
+
+c_title.c_title_url = '';
+
+module.exports = {
+	o_checkbox_input_list_classes: '',
+	o_checkbox_input_list_items_classes: 'lrv-a-unstyle-list',
+	o_checkbox_input_list_item_classes: '',
+	c_title: c_title,
+	o_checkbox_input_list_items: [
+		c_checkbox_input, c_checkbox_input, c_checkbox_input
+	]
+};

package/objects/o-checkbox-input-list/o-checkbox-input-list.twig

@@ -0,0 +1,15 @@
+<section class="o-checkbox-input-list {{ o_checkbox_input_list_classes }}">
+
+	{% if c_title %}
+		{% include "@larva/components/c-title/c-title.twig" with c_title %}
+	{% endif %}
+
+	<ul class="{{ o_checkbox_input_list_items_classes }}">
+		{% for item in o_checkbox_input_list_items %}
+			<li class="{{ o_checkbox_input_list_item_classes }}">
+				{% include "@larva/components/c-checkbox-input/c-checkbox-input.twig" with item %}
+			</li>
+		{% endfor %}
+	</ul>
+
+</section>

package/objects/o-collection-item/o-collection-item.floated.js

@@ -0,0 +1,8 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const o_collection_item = clonedeep( require( './o-collection-item.prototype' ) );
+
+o_collection_item.o_collection_item_classes += ' lrv-a-floated-parent';
+o_collection_item.o_figure.o_figure_classes += ' lrv-a-floated-left';
+
+module.exports = o_collection_item;

package/objects/o-collection-item/o-collection-item.prototype.js

@@ -0,0 +1,11 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_title = clonedeep( require( '../../components/c-title/c-title.prototype' ) );
+const o_figure = clonedeep( require( '../o-figure/o-figure.prototype' ) );
+const c_dek = clonedeep( require( '../../components/c-dek/c-dek.prototype' ) );
+
+module.exports = {
+	c_title: c_title,
+	c_dek: c_dek,
+	o_figure: o_figure,
+};

package/objects/o-collection-item/o-collection-item.twig

@@ -0,0 +1,5 @@
+<div class="o-collection-item {{ o_collection_item_classes }}">
+	{% include "@larva/components/c-title/c-title.twig" with c_title %}
+	{% include "@larva/objects/o-figure/o-figure.twig" with o_figure %}
+	{% include "@larva/components/c-dek/c-dek.twig" with c_dek %}
+</div>

package/objects/o-email-capture-form/README.md

@@ -0,0 +1,11 @@
+o-email-capture-form is an object intended to collect emails via the ExactTarget API. It accepts an array of c-hidden-fields for this the Opted In and Date ExactTarget data. 
+
+Although it could be used to collect emails via other services, developers should consider creating project-level patterns for anything other than ExactTarget. 
+
+Also note that o-email-capture-form should not be used to provide an email input in a longer form – it should be used only when a form required a single input for an email.
+
+This pattern is intended to go along with the EmailCapture larva-js package that will handle appending the input value to a success URL when the form is submitted. 
+
+## Available configuraitons:
+
+* `o-email-capture-form.minimal` – This configuration shows the input as a single line, and the submit button as a small arrow to the right of the input.

package/objects/o-email-capture-form/o-email-capture-form.minimal.js

@@ -0,0 +1,15 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const o_email_capture_form = clonedeep( require( './o-email-capture-form.prototype' ) );
+const c_button = clonedeep( require( '../../components/c-button/c-button.stripped' ) );
+const c_email_field = clonedeep( require( '../../components/c-email-field/c-email-field.ghost' ) );
+
+c_button.c_button_classes += ' lrv-a-icon-after lrv-a-icon-arrow-right';
+c_button.c_button_inner_classes = 'lrv-a-screen-reader-only';
+c_button.c_button_type_attr = 'submit';
+
+o_email_capture_form.c_button = c_button;
+o_email_capture_form.c_email_field = c_email_field;
+o_email_capture_form.o_email_capture_form_inner_classes = 'lrv-u-flex lrv-u-align-items-center lrv-u-justify-content-center lrv-u-border-b-1 lrv-u-border-color-currentColor';
+
+module.exports = o_email_capture_form;

package/objects/o-email-capture-form/o-email-capture-form.prototype.js

@@ -0,0 +1,17 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_button = clonedeep( require( '../../components/c-button/c-button.prototype' ) );
+const c_email_field = clonedeep( require( '../../components/c-email-field/c-email-field.prototype' ) );
+
+module.exports = {
+	o_email_capture_form_classes: '',
+	o_email_capture_form_context_name_attr: 'FormPost',
+	o_email_capture_form_inner_classes: '',
+	o_email_capture_form_action_url: '',
+	o_email_capture_form_button_text: 'Sign up',
+	o_email_capture_form_name_attr: 'email-capture-form',
+	o_email_capture_form_success_url: '',
+	c_button: c_button,
+	c_email_field: c_email_field,
+	o_email_capture_form_hidden_field_items: []
+};

package/objects/o-email-capture-form/o-email-capture-form.twig

@@ -0,0 +1,16 @@
+<form class="o-email-capture-form lrv-js-EmailCapture {{ o_email_capture_form_classes }}" method="post" action="{{ o_email_capture_form_action_url }}" name="{{ o_email_capture_form_name_attr }}" target="_blank">
+
+	<div class="o-email-capture-form__inner {{ o_email_capture_form_inner_classes }}">
+		{% include "@larva/components/c-email-field/c-email-field.twig" with c_email_field %}
+		{% include "@larva/components/c-button/c-button.twig" with c_button %}
+	</div>
+
+
+	<input type="hidden" name="__contextName" value="{{ o_email_capture_form_context_name_attr }}"/>
+	<input type="hidden" name="__executionContext" value="Post" />
+	<input type="hidden" name="__successPage" data-email-capture-success-url="{{ o_email_capture_form_success_url }}" value="" />
+
+	{% for item in o_email_capture_form_hidden_field_items %}
+		{% include "@larva/components/c-hidden-field/c-hidden-field.twig" with item %}
+	{% endfor %}
+</form>

package/objects/o-figure/README.md

@@ -0,0 +1,17 @@
+o-figure is designed to support images with a caption and a credit, primarily used within editorial content in `the_content` in WordPress. pmc-core-v2 contains a filter on the `caption` shortcode that applies this pattern. Is it also used in for featured images that include credits and captions.
+
+It consists of a `figure` element around a `c-lazy-image` and `c-figcaption`, with an optional link wrapper to make the entire block clickable.
+
+There is an option for adding an inline style for the width on the `figure` to provide a smooth paint in post content.
+
+The pattern supports Lazy Loading with `c-lazy-image`.
+
+## When to use:
+* For images or content that can stand on its own, outside of the document flow. Read more about [semantic use of `figure` here](http://html5doctor.com/the-figure-figcaption-elements/). 
+
+## When not to use:
+* For images that cannot stand on their own as content, e.g. a featured image for a post that requires additional post content to be understood.
+* Logo or icons
+
+## Future:
+Could support non-image figures such as charts, embeds, or quotes.

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

@@ -0,0 +1,16 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_figcaption = clonedeep( require( '../../components/c-figcaption/c-figcaption.prototype' ) );
+const c_lazy_image = clonedeep( require( '../../components/c-lazy-image/c-lazy-image.prototype' ) );
+
+module.exports = {
+	c_figcaption: c_figcaption,
+	c_lazy_image: c_lazy_image,
+	o_figure_link_tabindex_attr: '',
+	o_figure_link_target_attr: '_self',
+	o_figure_link_url: false,
+	o_figure_classes: '',
+	o_figure_link_classes: 'lrv-a-unstyle-link ',
+	o_figure_figcaption_outer: false,
+	o_figure_figcaption_outer_classes: '',
+};