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

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-margin-t-2 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: 'lrv-a-font-primary-s',
+	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 // js-AgeGateError {{ 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,13 @@
+<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 %}
+		{% if c_svg %}
+			{% include "@larva/components/c-svg/c-svg.twig" with c_svg %}
+		{% else %}
+			{{ article_kicker_text }}
+		{% endif %} 
+	{% if article_kicker_url %}
+		</a>
+	{% endif %}
+</div>

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

@@ -1,7 +1,7 @@
-const path = require( 'path' );
-const clone = require( '@penskemediacorp/larva' ).clone;// This should be in this repo, probably
-const o_nav = clone( path.resolve( __dirname, '../../objects/o-nav/o-nav.horizontal' ) );
-const c_link_path = path.resolve( __dirname, '../../components/c-link/c-link.prototype' );
+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 = [];
@@ -9,17 +9,16 @@ o_nav.o_nav_list_items = [];
 const tags = [ 'Art Gallery', 'Retrospective', 'Mapplethorpe' ];
 
 for (let i = 0; i < tags.length; i++) {
-	let c_link = clone( c_link_path );
+	let c_link = clonedeep( c_link_prototype );
 
 	c_link.c_link_text = tags[i];
-	c_link.c_link_classes += ' pmc-u-text-transform-uppercase';
+	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 = 'pmc-u-padding-r-1 pmc-u-font-family-secondary';
+o_nav.o_nav_title_classes = 'lrv-u-padding-r-1 lrv-u-font-family-secondary';
 
 module.exports = {
-	'o_nav': o_nav,
-}
+	o_nav: o_nav,
+};

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

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

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

@@ -0,0 +1,13 @@
+const clonedeep = require('lodash.clonedeep');
+
+const c_timestamp_prototype = require('@penskemediacorp/larva-patterns/components/c-timestamp/c-timestamp.prototype');
+
+const c_timestamp = clonedeep(c_timestamp_prototype);
+c_timestamp.c_timestamp_classes = 'lrv-u-font-size-14 lrv-u-text-transform-uppercase lrv-u-color-black lrv-u-display-inline-block';
+c_timestamp.c_timestamp_text = 'September 3, 2019 7:51pm';
+c_timestamp.c_timestamp_datetime_attr = '2019-09-03';
+
+module.exports = {
+	article_timestamp_classes: 'lrv-u-display-block lrv-u-margin-t-050@mobile-max',
+	c_timestamp: c_timestamp,
+};

package/modules/article-timestamp/article-timestamp.twig

@@ -0,0 +1,5 @@
+<div class="article-timestamp // {{ article_timestamp_classes }}">
+	{% if c_timestamp %}
+		{% include "@larva/components/c-timestamp/c-timestamp.twig" with c_timestamp %}
+	{% endif %}
+</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

@@ -1,7 +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": {
-		"modifier_class": "c-span--plain",
-		"c_span_classes":  "pmc-u-background-grey-light pmc-u-font-size-12 pmc-u-padding-a-025",
-		"c_span_text": "Sponsored Video"
-	}
-}
+	c_span: c_span
+};

package/modules/badge/badge.twig

@@ -1,3 +1,3 @@
-<div class="pmc-u-display-block u-margin-tb-auto {{ badge_classes }}">
+<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

@@ -1,8 +1,7 @@
+const clonedeep = require( 'lodash.clonedeep' );
 
-const path = require( 'path' );
-const clone = require( '@penskemediacorp/larva' ).clone;// This should be in this repo, probably
-const o_nav = clone( path.resolve( __dirname, '../../objects/o-nav/o-nav.horizontal' ) );
+const o_nav = clonedeep( require( '../../objects/o-nav/o-nav.horizontal' ) );
 
 module.exports = {
-	'o_nav': o_nav
-}
+	o_nav: o_nav
+};

package/modules/breadcrumbs/breadcrumbs.twig

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

package/modules/breaking-news/breaking-news.prototype.js

@@ -0,0 +1,29 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_heading = clonedeep( require( '@penskemediacorp/larva-patterns/components/c-heading/c-heading.prototype' ) );
+const c_title = clonedeep( require( '@penskemediacorp/larva-patterns/components/c-title/c-title.prototype' ) );
+const c_icon = clonedeep( require( '@penskemediacorp/larva-patterns/components/c-icon/c-icon.prototype' ) );
+
+
+c_heading.c_heading_text = 'Breaking News';
+c_heading.c_heading_classes = 'lrv-a-font-secondary-bold-l lrv-u-margin-r-1 lrv-u-text-transform-uppercase lrv-u-margin-b-050@mobile-max';
+
+c_title.c_title_text = 'US Stadiums Partnership, Inc. Files for Bankruptcy Amid Historic Cancellations';
+c_title.c_title_classes = 'lrv-u-font-size-18 lrv-u-line-height-copy lrv-u-font-weight-normal lrv-u-font-family-basic';
+c_title.c_title_link_classes = 'lrv-a-unstyle-link ';
+
+c_icon.c_icon_link_classes = 'dismiss-news-banner lrv-u-color-white lrv-u-cursor-pointer lrv-u-width-16 lrv-u-height-16 lrv-u-color-white:hover lrv-u-margin-l-auto';
+c_icon.c_icon_url = '#';
+c_icon.c_icon_target_attr = false;
+c_icon.c_icon_name = 'close';
+c_icon.c_icon_link_screen_reader_text = false;
+c_icon.c_icon_screen_reader_text = 'close';
+c_icon.c_icon_screen_reader_title_attr = 'close';
+
+module.exports = {
+	breaking_news_classes: 'lrv-u-background-color-brand-primary lrv-u-color-white',
+	breaking_news_inner_classes: 'lrv-a-wrapper lrv-u-flex lrv-u-flex-direction-column@mobile-max lrv-u-align-items-center lrv-u-padding-tb-1',
+	c_heading: c_heading,
+	c_title: c_title,
+	c_icon: c_icon
+};

package/modules/breaking-news/breaking-news.twig

@@ -0,0 +1,18 @@
+<section class="breaking-news // pmc-breaking-news {{ breaking_news_classes }} ">
+
+	<div class="{{breaking_news_inner_classes}}">
+
+		{% if c_heading %}
+			{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
+		{% endif %}
+
+		{% if c_title %}
+			{% include "@larva/components/c-title/c-title.twig" with c_title %}
+		{% endif %}
+
+		{% if c_icon %}
+			{% include "@larva/components/c-icon/c-icon.twig" with c_icon %}
+		{% endif %}
+	</div>
+
+</section>

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>