@penskemediacorp/larva-patterns 1.0.1-alpha.0 → 1.1.1

package/modules/age-gate/age-gate.prototype.js

@@ -0,0 +1,68 @@
+const clonedeep = require('lodash.clonedeep');
+
+const c_svg_prototype = require('@penskemediacorp/larva-patterns/components/c-svg/c-svg.prototype');
+const c_heading = clonedeep(require('@penskemediacorp/larva-patterns/components/c-heading/c-heading.prototype'));
+const o_input_group = clonedeep(require('@penskemediacorp/larva-patterns/objects/o-input-group/o-input-group.prototype'));
+const c_button = clonedeep(require('@penskemediacorp/larva-patterns/components/c-button/c-button.prototype'));
+const c_dek = clonedeep(require('@penskemediacorp/larva-patterns/components/c-dek/c-dek.prototype'));
+
+const c_svg_header = clonedeep(c_svg_prototype);
+c_svg_header.c_svg_name = 'brand-logo-white';
+c_svg_header.c_svg_classes = 'lrv-u-width-150 lrv-u-margin-lr-auto lrv-u-margin-b-2';
+
+c_heading.c_heading_classes += ' lrv-a-font-primary-l lrv-u-margin-b-2';
+c_heading.c_heading_text = 'You must be 21 to enter.';
+
+o_input_group.o_input_group_class = 'lrv-u-margin-b-2';
+o_input_group_item = clonedeep( o_input_group.o_input_group_items[0] );
+o_input_group_item.c_input_class = 'lrv-a-font-primary-m lrv-u-color-white lrv-u-background-color-grey-darkest lrv-u-padding-lr-050 lrv-u-padding-tb-150 lrv-u-width-100 lrv-u-text-align-center';
+o_input_group_item.c_input_size_attr = 2;
+o_input_group_item.c_input_maxlength_attr = 4;
+
+o_input_day_item = clonedeep( o_input_group_item );
+o_input_month_item = clonedeep( o_input_group_item );
+o_input_year_item = clonedeep( o_input_group_item );
+
+o_input_month_item.c_input_placeholder_attr = 'MM';
+o_input_month_item.c_input_id_attr = 'pmc-age-gate-month';
+o_input_month_item.c_input_error_attr = 'Please enter a valid month';
+o_input_month_item.c_input_size_attr = 4;
+o_input_month_item.c_input_maxlength_attr = 2;
+
+o_input_day_item.c_input_placeholder_attr = 'DD';
+o_input_day_item.c_input_id_attr = 'pmc-age-gate-day';
+o_input_day_item.c_input_error_attr = 'Please enter a valid day';
+o_input_day_item.c_input_size_attr = 4;
+o_input_day_item.c_input_maxlength_attr = 2;
+
+o_input_year_item.c_input_placeholder_attr = 'YYYY';
+o_input_year_item.c_input_id_attr = 'pmc-age-gate-year';
+o_input_year_item.c_input_error_attr = 'Please enter a valid year';
+o_input_year_item.c_input_size_attr = 4;
+o_input_year_item.c_input_maxlength_attr = 4;
+
+o_input_group.o_input_group_items = [
+	o_input_month_item,
+	o_input_day_item,
+	o_input_year_item
+];
+
+c_button.c_button_text = 'View';
+c_button.c_button_classes = ' lrv-u-color-white lrv-u-background-color-brand-primary lrv-u-padding-lr-2 lrv-u-padding-tb-075 lrv-u-margin-b-2 lrv-u-text-align-center lrv-u-text-transform-uppercase lrv-a-font-primary-m';
+
+c_dek.c_dek_classes = 'lrv-a-font-primary-xs';
+c_dek.c_dek_text = 'Legal text.'
+
+module.exports = {
+	age_gate_class: 'lrv-u-height-100p lrv-u-padding-t-2 lrv-u-background-color-black lrv-u-text-align-center lrv-u-color-white',
+	age_gate_inner_class: 'lrv-u-max-width-1000 lrv-u-margin-lr-auto',
+	age_gate_form_class: 'lrv-u-border-b-1',
+	age_gate_error_class: '',
+	form_wrapper_class: '',
+	age_gate_footer_class: 'lrv-u-border-t-1 lrv-u-margin-t-025',
+	c_heading,
+	c_svg_header,
+	o_input_group,
+	c_button,
+	c_dek
+};

package/modules/age-gate/age-gate.twig

@@ -0,0 +1,37 @@
+<div class="age-gate // js-AgeGate {{ age_gate_class }}">
+	<div class="age-gate-inner // {{ age_gate_inner_class }}">
+		<div class="age-gate-header // {{ age_gate_header_class }}">
+			{% if c_svg_header %}
+				{% include "@larva/components/c-svg/c-svg.twig" with c_svg_header %}
+			{% endif %}
+			{% if c_lazy_image_header %}
+				{% include "@larva/components/c-lazy-image/c-lazy-image.twig" with c_lazy_image_header %}
+			{% endif %}
+			{% if c_heading %}
+				{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
+			{% endif %}
+		</div>
+		<div class="age-gate-form // {{ age_gate_form_class }}">
+			<form class="js-AgeGateForm">
+				{% if o_input_group %}
+					{% include "@larva/objects/o-input-group/o-input-group.twig" with o_input_group %}
+				{% endif %}
+				<div class="age-gate-error // {{ age_gate_error_class }}"></div>
+				<div class="age-gate-button-wrapper">
+					{% include "@larva/components/c-button/c-button.twig" with c_button %}
+				</div>
+			</form>
+		</div>
+		<div class="age-gate-footer // {{ age_gate_footer_class }}">
+			{% if c_dek %}
+				{% include "@larva/components/c-dek/c-dek.twig" with c_dek %}
+			{% endif %}
+			{% if c_svg_footer %}
+				{% include "@larva/components/c-svg/c-svg.twig" with c_svg_footer %}
+			{% endif %}
+			{% if c_lazy_image_footer %}
+				{% include "@larva/components/c-lazy-image/c-lazy-image.twig" with c_lazy_image_footer %}
+			{% endif %}
+		</div>
+	</div>
+</div>

package/modules/article-callout/article-callout.prototype.js

@@ -0,0 +1,5 @@
+module.exports = {
+    article_callout_classes: '',
+    article_callout_title_text: 'Update',
+    article_callout_markup: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
+};

package/modules/article-callout/article-callout.twig

@@ -0,0 +1,3 @@
+<p class="article-callout larva // {{ article_callout_classes }}">
+	<span class="article-callout-title lrv-a-icon lrv-a-icon-after lrv-a-icon-vertical-pipe lrv-u-width-auto // {{ article_callout_primary_classes }}">{{ article_callout_title_text }}</span><span class="article-callout-text {{ article_callout_secondary_classes }}">{{ article_callout_markup|raw }}</span>
+</p>

package/modules/article-excerpt/article-excerpt.prototype.js

@@ -0,0 +1,4 @@
+module.exports = {
+	article_excerpt_classes: '',
+	article_excerpt_markup: 'The former President cautioned young activists against using the slogan “defund the police” to achieve changes in policing practices, instead urging them to have a more inclusive discussion to enact changes.',
+};

package/modules/article-excerpt/article-excerpt.twig

@@ -0,0 +1 @@
+<div class="article-excerpt larva // {{ article_excerpt_classes }}">{{ article_excerpt_markup|raw }}</div>

package/modules/article-kicker/article-kicker.prototype.js

@@ -0,0 +1,6 @@
+module.exports = {
+	article_kicker_classes: '',
+	article_kicker_text: 'Article Kicker',
+	article_kicker_url: '#',
+	article_kicker_link_classes: '',
+};

package/modules/article-kicker/article-kicker.twig

@@ -0,0 +1,9 @@
+<div class="article-kicker larva // {{ article_kicker_classes }}">
+	{% if article_kicker_url %}
+		<a href="{{ article_kicker_url }}" class="article-kicker-link {{ article_kicker_link_classes }}">
+	{% endif %}
+		{{ article_kicker_text }}
+	{% if article_kicker_url %}
+		</a>
+	{% endif %}
+</div>

package/modules/article-tags/article-tags.prototype.js

@@ -0,0 +1,24 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const o_nav = clonedeep( require( '../../objects/o-nav/o-nav.horizontal' ) );
+const c_link_prototype = require( '../../components/c-link/c-link.prototype' );
+
+o_nav.o_nav_title_text = 'Read More About:';
+o_nav.o_nav_list_items = [];
+
+const tags = [ 'Art Gallery', 'Retrospective', 'Mapplethorpe' ];
+
+for (let i = 0; i < tags.length; i++) {
+	let c_link = clonedeep( c_link_prototype );
+
+	c_link.c_link_text = tags[i];
+	c_link.c_link_classes += ' lrv-u-text-transform-uppercase';
+
+	o_nav.o_nav_list_items.push( c_link );
+}
+
+o_nav.o_nav_title_classes = 'lrv-u-padding-r-1 lrv-u-font-family-secondary';
+
+module.exports = {
+	o_nav: o_nav,
+};

package/modules/article-tags/article-tags.twig

@@ -0,0 +1,3 @@
+<div class="article-tags // {{ article_tags_classes }}">
+	{% include "@larva/objects/o-nav/o-nav.twig" with o_nav %}
+</div>

package/modules/article-title/article-title.prototype.js

@@ -0,0 +1,4 @@
+module.exports = {
+	article_title_classes: '',
+	article_title_markup: 'Frieze Editorial Director to Step Down, and More from September 6, 2019',
+};

package/modules/article-title/article-title.twig

@@ -0,0 +1 @@
+<h1 class="article-title larva // {{ article_title_classes }}">{{ article_title_markup|raw }}</h1>

package/modules/author/author.prototype.js

@@ -0,0 +1,43 @@
+const clonedeep = require('lodash.clonedeep');
+
+const c_link_prototype = require('../../components/c-link/c-link.prototype');
+const c_tagline_prototype = require('../../components/c-tagline/c-tagline.prototype');
+const c_timestamp_prototype = require('../../components/c-timestamp/c-timestamp.prototype');
+
+const c_timestamp = clonedeep(c_timestamp_prototype);
+c_timestamp.c_timestamp_classes = 'lrv-u-color-black lrv-u-margin-l-auto';
+c_timestamp.c_timestamp_text = 'September 3, 2019 7:51pm';
+c_timestamp.c_timestamp_datetime_attr = '2019-09-03';
+
+const author_details_prototype = require('../author-details/author-details.prototype');
+const author_details = clonedeep(author_details_prototype);
+
+c_link_author = clonedeep(c_link_prototype);
+c_link_author.c_link_text = 'David Robb';
+c_link_author.c_link_classes = 'lrv-u-color-black lrv-u-color-brand-primary:hover lrv-u-text-decoration-underline:hover';
+c_link_author.c_link_url = '#';
+
+
+const c_tagline_multiple_authors = clonedeep(c_tagline_prototype);
+c_tagline_multiple_authors.c_tagline_classes = 'lrv-u-display-inline lrv-a-children-link-color-black lrv-a-children-link-color-brand-primary:hover lrv-a-children-link-decoration-underline:hover lrv-u-margin-r-050 lrv-u-text-transform-uppercase lrv-u-letter-spacing-015 lrv-u-letter-spacing-012@mobile-max';
+c_tagline_multiple_authors.c_tagline_markup = "<a href='#'>Link 1</a>, <a href='#'>Link 2</a>";
+c_tagline_multiple_authors.c_tagline_text = false;
+
+module.exports = {
+	author_classes: 'lrv-u-font-size-16 lrv-u-font-family-body lrv-u-font-size-13@mobile-max',
+	author_multiple_inner_classes: 'lrv-u-flex@desktop',
+	author_single_inner_classes: ' lrv-u-flex lrv-u-align-items-center',
+	author_name_classes: 'lrv-u-margin-tb-00 lrv-u-text-transform-uppercase lrv-u-letter-spacing-015 lrv-u-letter-spacing-012@mobile-max',
+	author_content_classes: 'lrv-u-flex@tablet lrv-u-width-100p lrv-u-justify-content-space-between',
+	author_content_inner_classes: 'lrv-u-flex lrv-u-align-items-center lrv-a-glue-parent',
+	author_timestamp_outer_classes: 'lrv-u-margin-l-1@tablet',
+	author_tagline_classes: 'lrv-u-margin-tb-00 lrv-u-text-transform-uppercase lrv-u-letter-spacing-015 lrv-u-letter-spacing-012@mobile-max',
+	author_button_classes: 'lrv-a-unstyle-button lrv-u-display-contents lrv-u-flex lrv-u-align-items-center js-PopOver',
+	author_detail_outer_classes: 'lrv-a-hidden@desktop-max lrv-a-glue lrv-a-glue--l-0 lrv-a-glue--t-100p js-PopOver-target',
+	is_multiple_author: false,
+	c_tagline_multiple_authors: c_tagline_multiple_authors,
+	c_timestamp: c_timestamp,
+	c_link: c_link_author,
+	c_icon: false,
+	author_details: author_details
+};

package/modules/author/author.twig

@@ -0,0 +1,38 @@
+<div class="author // {{ author_classes }}">
+	{% if is_multiple_author %}
+		<div class="author-multiple-inner // {{ author_multiple_inner_classes }} ">
+			<div class="author-tagline // {{ author_tagline_classes }} ">
+				By {% include "@larva/components/c-tagline/c-tagline.twig" with c_tagline_multiple_authors %}
+			</div>
+			{% if c_timestamp %}
+				{% include "@larva/components/c-timestamp/c-timestamp.twig" with c_timestamp %}
+			{% endif %} 
+		</div>
+	{% else %}
+		<div class="author-single-inner // {{ author_single_inner_classes }} ">
+			<div class="author-content // {{ author_content_classes }} ">
+				<div class="author-content-inner // {{ author_content_inner_classes }} ">
+					<button class="author-button // {{ author_button_classes }} ">
+						<p class="author-name // {{ author_name_classes }} ">
+							By {% include "@larva/components/c-link/c-link.twig" with c_link %}
+						</p>
+
+						{% if c_icon %}
+							{% include "@larva/components/c-icon/c-icon.twig" with c_icon %}
+						{% endif %}
+
+						<div class="author-detail-outer // {{ author_detail_outer_classes }} ">
+							{% include "@larva/modules/author-details/author-details.twig" with author_details %}
+						</div>
+					</button>
+				</div>
+
+				{% if c_timestamp %}
+					<div class="author-timestamp-outer // {{ author_timestamp_outer_classes }}">
+						{% include "@larva/components/c-timestamp/c-timestamp.twig" with c_timestamp %}
+					</div>
+				{% endif %}
+			</div>
+		</div>
+	{% endif %}
+</div>

package/modules/author-details/author-details.prototype.js

@@ -0,0 +1,70 @@
+const clonedeep = require('lodash.clonedeep');
+
+const o_nav_prototype = require('../../objects/o-nav/o-nav.prototype');
+const o_nav = clonedeep(o_nav_prototype);
+
+const c_title_prototype = require('../../components/c-title/c-title.prototype');
+const c_title = clonedeep(c_title_prototype);
+
+const c_icon_prototype = require('../../components/c-icon/c-icon.prototype');
+const c_icon_twitter = clonedeep(c_icon_prototype);
+const c_icon_mail = clonedeep(c_icon_prototype);
+
+const c_link_prototype = require('../../components/c-link/c-link.prototype');
+const storyTitles = [
+	'No Doubt’s Tony Kanal on Robbie Shakespeare: ‘You Can’t Overstate How Great He Was’',
+	'From ‘Downpressor Man’ to ‘Jokerman’: 10 Essential Robbie Shakespeare Tracks'
+];
+
+// Overwrite default items
+o_nav.o_nav_list_items = [];
+
+for (let i = 0; i < storyTitles.length; i++) {
+	let c_link = clonedeep(c_link_prototype);
+
+	c_link.c_link_text = storyTitles[i];
+	c_link.c_link_classes = 'lrv-u-color-black';
+
+	o_nav.o_nav_list_items.push(c_link);
+};
+
+c_title.c_title_classes = 'lrv-u-font-size-13 lrv-u-font-weight-bold lrv-u-margin-r-auto lrv-u-text-transform-uppercase lrv-u-width-100';
+c_title.c_title_url = '#';
+c_title.c_title_text = 'PATRICIA MESCHINO';
+c_title.c_title_link_classes = 'lrv-u-color-black';
+
+o_nav.o_nav_classes = 'lrv-u-border-t-1 lrv-u-width-100p lrv-u-margin-t-075 lrv-u-padding-t-025 ';
+o_nav.o_nav_title_text = '';
+o_nav.o_nav_title_classes = 'lrv-u-padding-t-050 lrv-u-padding-b-025 lrv-u-font-family-primary lrv-u-font-size-20';
+o_nav.o_nav_list_classes = ' lrv-u-font-size-13 lrv-u-border-t-1 lrv-u-border-b-1 lrv-u-padding-l-1 lrv-u-padding-t-075  lrv-u-list-style-type-disclosure-closed';
+o_nav.o_nav_list_item_classes = 'lrv-u-padding-b-075';
+
+c_icon_twitter.c_icon_name = 'twitter';
+c_icon_twitter.c_icon_classes = 'lrv-u-width-16 lrv-u-height-16 lrv-u-color-black';
+c_icon_twitter.c_icon_url = "#";
+c_icon_twitter.c_icon_screen_reader_text = 'Twitter Icon';
+c_icon_twitter.c_icon_screen_reader_title_attr = 'Twitter Icon';
+c_icon_twitter.c_icon_link_classes = 'lrv-u-flex';
+
+c_icon_mail.c_icon_name = 'envelope';
+c_icon_mail.c_icon_classes = 'lrv-u-margin-l-075 lrv-u-width-16 lrv-u-height-16 lrv-u-color-black';
+c_icon_mail.c_icon_url = "#";
+c_icon_mail.c_icon_screen_reader_text = 'Email Icon';
+c_icon_mail.c_icon_screen_reader_title_attr = 'Email Icon';
+c_icon_mail.c_icon_link_classes = 'lrv-u-flex';
+
+c_link_view_all = clonedeep(c_link_prototype);
+c_link_view_all.c_link_classes = 'lrv-a-unstyle-link lrv-u-font-size-10 lrv-u-text-transform-uppercase';
+c_link_view_all.c_link_text = 'View All Stories ▶';
+c_link_view_all.c_link_url = '#';
+
+module.exports = {
+	author_details_classes: 'lrv-u-padding-lr-125 lrv-u-padding-t-125 lrv-u-padding-b-1 lrv-u-width-215 lrv-u-flex lrv-u-flex-wrap-wrap lrv-u-background-color-white lrv-u-border-a-2 lrv-a-glue-parent lrv-a-icon-after-arrow-top-left lrv-u-margin-t-1',
+	author_details_icons_classes: 'lrv-u-flex lrv-u-align-items-center lrv-u-margin-l-auto',
+	author_details_view_link_classes: ' lrv-u-flex lrv-u-margin-l-auto',
+	c_title: c_title,
+	c_icon_twitter: c_icon_twitter,
+	c_icon_mail: c_icon_mail,
+	o_nav: o_nav,
+	c_link_view_all: c_link_view_all
+};

package/modules/author-details/author-details.twig

@@ -0,0 +1,25 @@
+<section class="author-details // {{ author_details_classes }} ">
+
+	{% include "@larva/components/c-title/c-title.twig" with c_title %}
+
+	<div class="author-details-icons // {{ author_details_icons_classes }} ">
+		{% if c_icon_twitter %}
+			{% include "@larva/components/c-icon/c-icon.twig" with c_icon_twitter %} 
+		{% endif %}
+		{% if c_icon_mail %}
+			{% include "@larva/components/c-icon/c-icon.twig" with c_icon_mail %} 
+		{% endif %}
+	</div>
+
+	{% if o_nav %}
+
+		{% include "@larva/objects/o-nav/o-nav.twig" with o_nav %}
+
+		{% if c_link_view_all %}
+			<div class="author-details-view-link // {{ author_details_view_link_classes }} ">
+				{% include "@larva/components/c-link/c-link.twig" with c_link_view_all %}
+			</div>
+		{% endif %}
+
+	{% endif %}
+</section>

package/modules/back-to-list/back-to-list.prototype.js

@@ -0,0 +1,11 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_link = clonedeep( require( '../../components/c-link/c-link.prototype' ) );
+
+c_link.c_link_text = 'Back to the full list';
+c_link.c_link_classes += ' lrv-u-text-transform-uppercase lrv-u-font-family-primary lrv-u-font-size-20 lrv-a-icon-before lrv-a-icon-arrow-left';
+
+module.exports = {
+	back_to_list_classes: 'a-hidden@desktop-max',
+	c_link: c_link
+};

package/modules/back-to-list/back-to-list.twig

@@ -0,0 +1,5 @@
+<div class="back-to-list // lrv-u-padding-tb-1 {{ back_to_list_classes }}">
+	{% if c_link %}
+		{% include "@larva/components/c-link/c-link.twig" with c_link %}
+	{% endif %}
+</div>

package/modules/badge/badge.prototype.js

@@ -0,0 +1,11 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_span_prototye = require( '../../components/c-span/c-span.prototype' );
+const c_span = clonedeep( c_span_prototye );
+
+c_span.c_span_classes += ' lrv-u-background-color-grey-light lrv-u-font-size-12 lrv-u-padding-a-025';
+c_span.c_span_text = 'Sponsored Video';
+
+module.exports = {
+	c_span: c_span
+};

package/modules/badge/badge.twig

@@ -0,0 +1,3 @@
+<div class="lrv-u-display-block lrv-u-margin-tb-auto {{ badge_classes }}">
+	{% include "@larva/components/c-span/c-span.twig" with c_span %}
+</div>

package/modules/banner/banner.prototype.js

@@ -0,0 +1,10 @@
+const clonedeep = require('lodash.clonedeep');
+
+const c_lazy_image_prototype = require('../../components/c-lazy-image/c-lazy-image.prototype');
+const c_lazy_image = clonedeep(c_lazy_image_prototype);
+
+module.exports = {
+	banner_classes: '',
+	c_lazy_image,
+	screen_reader_text: 'Page Banner',
+};

package/modules/banner/banner.twig

@@ -0,0 +1,10 @@
+<div class="banner // {{ banner_classes }}">
+	<div class="banner__img">
+	{% if c_lazy_image %}
+		{% include "@larva/components/c-lazy-image/c-lazy-image.twig" with c_lazy_image %}
+	{% endif %}
+	</div>
+	{% if screen_reader_text %}
+		<h1 class="lrv-a-screen-reader-only">{{ screen_reader_text }}</h1>
+	{% endif %}
+</div>

package/modules/brands-most-popular/brands-most-popular.prototype.js

@@ -0,0 +1,40 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_heading_prototype = require( '../../components/c-heading/c-heading.prototype' );
+const o_card_prototype = require( '../../objects/o-card/o-card.prototype' );
+const c_title_prototype = require( '../../components/c-title/c-title.prototype' );
+const c_svg_prototype = require( '../../components/c-svg/c-svg.prototype' );
+const c_span_prototype = require( '../../components/c-span/c-span.prototype' );
+
+const c_heading = clonedeep( c_heading_prototype );
+const o_card = clonedeep( o_card_prototype );
+const c_title = clonedeep( c_title_prototype );
+const c_svg = clonedeep( c_svg_prototype );
+const c_span = clonedeep( c_span_prototype );
+
+c_heading.c_heading_text = 'Most Popular';
+
+c_svg.c_svg_classes = 'lrv-u-height-16 lrv-u-color-black';
+c_svg.c_svg_name = 'brand-logo';
+
+c_title.c_title_text = 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi expedita pariatur.';
+c_title.c_title_classes += ' lrv-u-margin-b-075';
+c_title.c_title_url = false;
+
+o_card.o_card_classes = 'lrv-u-flex lrv-u-height-100p lrv-u-color-brand-primary:hover';
+o_card.o_card_link_url = '#';
+o_card.o_card_link_classes = 'lrv-a-unstyle-link';
+o_card.o_card_content_classes = 'lrv-u-flex lrv-u-flex-direction-column';
+o_card.o_card_image_wrap_classes = '';
+o_card.c_lazy_image = false;
+o_card.c_span = false;
+o_card.c_svg = c_svg;
+o_card.c_title = c_title;
+o_card.c_timestamp = false;
+
+module.exports = {
+	brands_most_popular_classes: 'lrv-a-wrapper lrv-u-margin-b-150',
+	brands_most_popular_items_wrapper_classes: '',
+	c_heading: c_heading,
+	popular_items: [ o_card, o_card, o_card, o_card ],
+};

package/modules/brands-most-popular/brands-most-popular.twig

@@ -0,0 +1,11 @@
+<section class="brands-most-popular // {{brands_most_popular_classes}}">
+	{% if c_heading %}
+		{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
+	{% endif %}
+
+	<div class="{{ brands_most_popular_items_wrapper_classes }}">
+		{% for item in popular_items %}
+			{% include "@larva/objects/o-card/o-card.twig" with item %}
+		{% endfor %}
+	</div>
+</section>

package/modules/breadcrumbs/breadcrumbs.prototype.js

@@ -0,0 +1,7 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const o_nav = clonedeep( require( '../../objects/o-nav/o-nav.horizontal' ) );
+
+module.exports = {
+	o_nav: o_nav
+};

package/modules/breadcrumbs/breadcrumbs.twig

@@ -0,0 +1,3 @@
+<div class="breadcrumbs // {{ breadcrumbs_classes }}">
+	{% include "@larva/objects/o-nav/o-nav.twig" with o_nav %}
+</div>

package/modules/button/button.prototype.js

@@ -0,0 +1,9 @@
+module.exports = {
+	button_url: null,
+	button_classes: 'lrv-u-padding-tb-050 lrv-u-padding-lr-1',
+	button_markup: 'Button Text',
+	button_background_color_class: 'lrv-u-background-color-brand-primary',
+	button_color_class: 'lrv-u-color-white',
+	button_typography_class: '',
+	button_width_class: '',
+};

package/modules/button/button.twig

@@ -0,0 +1,7 @@
+<a class="button larva // {{ button_classes }} {{ button_typography_class }} {{ button_background_color_class }} {{ button_color_class }} {{ button_width_class }}"
+	{% if button_url %}
+		href="{{ button_url }}"
+	{% endif %}
+>
+	{{ button_markup }}
+</a>

package/modules/carousel-grid/README.md

@@ -0,0 +1,7 @@
+This module renders Carousel block posts in the Gutenberg editor.
+
+The default pattern renders a primary post, with two secondary posts in the sidebar.
+
+The overlay pattern displays a fuller width primary post with text overlay, and a stacked row of three secondary posts.
+
+The primary post displays section title, a post image and title, author byline and timestamp; the secondary posts display a post image and title only.

package/modules/carousel-grid/carousel-grid.overlay.js

@@ -0,0 +1,26 @@
+const clonedeep = require( 'lodash.clonedeep' );
+const { __experimentalCloneWithFallback } = require( '@penskemediacorp/larva' );
+
+const carousel_grid_overlay = __experimentalCloneWithFallback( 'modules/carousel-grid/carousel-grid.prototype' );
+
+carousel_grid_overlay.o_card_large.o_card_classes = 'lrv-a-carousel-grid__overlay--primary';
+carousel_grid_overlay.o_card_large.o_card_content_classes += ' lrv-a-carousel-grid__overlay--primary-content';
+
+carousel_grid_overlay.o_card_large.c_lazy_image.c_lazy_image_classes = 'lrv-a-carousel-grid__overlay--primary-img';
+carousel_grid_overlay.o_card_large.c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-3x2';
+
+carousel_grid_overlay.carousel_grid_overlay_layout_classes = 'lrv-a-carousel-grid__overlay';
+carousel_grid_overlay.carousel_grid_overlay_secondary_classes = 'lrv-a-carousel-grid__overlay--secondary';
+
+const o_card_item = clonedeep( carousel_grid_overlay.o_card_items[0] );
+
+carousel_grid_overlay.o_card_items = [o_card_item, o_card_item, o_card_item];
+
+o_card_item.o_card_classes += ' lrv-a-carousel-grid__overlay--secondary-card lrv-u-align-items-center';
+
+o_card_item.c_title.c_title_classes = 'lrv-a-font-secondary-m';
+
+o_card_item.c_lazy_image.c_lazy_image_classes += ' lrv-u-width-100p';
+o_card_item.c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-1x1';
+
+module.exports = carousel_grid_overlay;

package/modules/carousel-grid/carousel-grid.prototype.js

@@ -0,0 +1,50 @@
+const clonedeep = require( 'lodash.clonedeep' );
+const { __experimentalCloneWithFallback } = require( '@penskemediacorp/larva' );
+
+const o_card_prototype = clonedeep( require( '../../objects/o-card/o-card.prototype' ) );
+const o_author = __experimentalCloneWithFallback( 'objects/o-author/o-author.prototype' );
+const o_card = clonedeep( o_card_prototype );
+
+o_card.o_card_classes = 'lrv-u-margin-b-1';
+o_card.o_card_content_classes = ' lrv-u-margin-t-050';
+
+o_card.c_lazy_image.c_lazy_image_classes += ' ';
+o_card.c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-3x2';
+
+o_card.c_lazy_image.c_lazy_image_link_url = '#';
+
+o_card.c_span.c_span_url = '#';
+o_card.c_span.c_span_text = false;
+
+o_card.c_title.c_title_text = '‘Solo: A Star Wars Story’ Is Going to Cannes, So Does That Mean It’s Good?';
+o_card.c_title.c_title_classes = 'lrv-a-font-primary-xxxs';
+o_card.c_title.c_title_link_classes = 'lrv-a-unstyle-link';
+
+o_card.c_timestamp.c_timestamp_text = false;
+
+const o_card_large = clonedeep( o_card );
+
+o_card_large.c_span.c_span_text = 'Film';
+
+o_card_large.c_title.c_title_text = '‘Avengers: Infinity War’ vs. ‘Black Panther’: 10 Factors That Will Determine Which Film Is Box-Office King';
+
+o_card_large.o_author = clonedeep( o_author );
+o_card_large.o_author.o_author_text = 'By ';
+o_card_large.o_author.c_span.c_span_text = 'Author Name';
+o_card_large.o_author.c_timestamp.c_timestamp_text = 'July 7, 2021';
+o_card_large.o_author.c_timestamp.c_timestamp_classes = 'lrv-a-icon-before lrv-a-icon-bullet';
+
+// o_card_large uses o_author components that are not needed/used by o_card.
+o_card.o_author = false;
+
+o_card_large.o_card_classes = '';
+o_card_large.o_card_content_classes = 'lrv-u-padding-a-1';
+o_card_large.c_title.c_title_classes = 'lrv-a-font-primary-xs lrv-u-margin-tb-050';
+
+module.exports = {
+	o_card_large,
+	o_card_items: [
+		o_card,
+		o_card
+	]
+};

package/modules/carousel-grid/carousel-grid.twig

@@ -0,0 +1,17 @@
+<div class="carousel-grid //">
+	<div class="lrv-a-wrapper">
+		<div class="lrv-a-carousel-grid {{ carousel_grid_overlay_layout_classes }}">
+
+			<div class="lrv-u-padding-a-1">
+				{% include "@larva/objects/o-card/o-card.twig" with o_card_large %}
+			</div>
+
+			<div class="lrv-u-padding-a-1 {{ carousel_grid_overlay_secondary_classes }}">
+				{% for item in o_card_items %}
+					{% include "@larva/objects/o-card/o-card.twig" with item %}
+				{% endfor %}
+			</div>
+
+		</div>
+	</div>
+</div>