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

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>

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,14 @@
+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,
+	c_tagline_author: false,
+};

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

@@ -0,0 +1,17 @@
+<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_tagline_author %}
+		{% include "@larva/components/c-tagline/c-tagline.twig" with c_tagline_author %}
+	{% 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-category-link/o-category-link.prototype.js

@@ -0,0 +1,6 @@
+module.exports = {
+	o_category_link_wrap: false,
+	o_category_link_classes: 'lrv-a-unstyle-link lrv-u-whitespace-nowrap lrv-u-display-inline-block a-font-accent-s lrv-u-font-weight-bold lrv-u-color-black lrv-u-text-transform-uppercase u-border-b-3 lrv-u-border-color-brand-primary lrv-u-padding-b-025 lrv-u-color-brand-primary:hover lrv-a-hover-effect',
+	o_category_link_url: '#',
+	o_category_link_text: 'News'
+};

package/objects/o-category-link/o-category-link.twig

@@ -0,0 +1,5 @@
+<div class="o-category-link-wrap {{ o_category_link_wrap_classes }}">
+	<a class="o-category-link // {{ o_category_link_classes }}" href="{{ o_category_link_url }}">
+		{{ o_category_link_text }}
+	</a>
+</div>

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

@@ -1,8 +1,8 @@
-const path = require( 'path' );
-const clone = require( '@penskemediacorp/larva' ).clone;// This should be in this repo, probably
-const o_collection_item = clone( path.resolve( __dirname, '../o-collection-item.prototype' ) );
+const clonedeep = require( 'lodash.clonedeep' );
 
-o_collection_item.o_collection_item_classes += " a-floated-parent";
-o_collection_item.o_figure.o_figure_classes += " a-floated-left";
+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;