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

package/modules/injected-related-content/injected-related-content.twig

@@ -0,0 +1,23 @@
+<div class="injected-related-content // {{injected_related_content_classes}}" >
+	<div class="injected-related-content-inner // {{injected_related_content_inner_classes}}">
+		<div class="injected-related-content-primary // {{injected_related_content_primary_classes}}">
+			<div class="injected-related-content-heading // {{injected_related_content_heading_classes}}">
+				{% include "@larva/components/c-title/c-title.twig" with c_heading %}
+			</div>
+			{% if c_lazy_image %}
+				{% include "@larva/components/c-lazy-image/c-lazy-image.twig" with c_lazy_image %}
+			{% endif %}
+
+			{% if c_title %}
+				{% include "@larva/components/c-title/c-title.twig" with c_title %}
+			{% endif %}
+
+		</div>
+		<div class="injected-related-content-secondary // {{injected_related_content_secondary_classes}}">
+			{% for item in o_card_items %}
+				{% include "@larva/objects/o-card/o-card.twig" with item %}
+			{% endfor %}
+		</div>
+	</div>
+</div>
+

package/modules/list/list.ordered.js

@@ -0,0 +1,7 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const list = clonedeep( require( './list.prototype' ) );
+
+list.list_type_name = 'o';
+
+module.exports = list;

package/modules/list/list.prototype.js

@@ -0,0 +1,57 @@
+module.exports = {
+	list_classes: 'a-font-body-m',
+	list_markup: 'Paragraph Text.',
+	list_type_name: 'u',
+	list_items: [ 
+		{
+			list_markup: 'item_one', 
+		},
+		{
+			list_markup: 'item_two', 
+		},
+		{
+			list_classes: 'a-font-body-m',
+			list_markup: 'Paragraph Text with sub items woo.',
+			list_type_name: 'u',
+			list_item_classes: '',
+			list_items: [
+				{
+					list_markup: 'sub_item_one', 
+				},
+				{
+					list_markup: 'sub_item_two', 
+				},
+				{
+					list_classes: 'a-font-body-m',
+					list_markup: 'Paragraph Text.',
+					list_type_name: 'u',
+					list_item_classes: '',
+					list_items: [
+						{
+							list_markup: 'sub_sub_item_one', 
+						},
+						{
+							list_markup: 'sub_sub_item_two', 
+						},
+						{
+							list_classes: 'a-font-body-m',
+							list_markup: 'Paragraph Text.',
+							list_type_name: 'u',
+							list_item_classes: '',
+							list_items: [
+								{
+									list_markup: 'sub_sub_sub_item_one', 
+								},
+								{
+									list_markup: 'sub_sub_sub_item_two', 
+								},
+							]
+						}
+						
+					]
+				}
+			]
+		}
+	],
+	list_item_classes: ''
+};

package/modules/list/list.twig

@@ -0,0 +1,11 @@
+<{{ list_type_name }}l class="list larva // {{ list_classes }}">
+	{% for item in list_items %}
+		<li class="list__item larva // {{ list_item_classes }}">
+			{{ item['list_markup'] }}
+
+			{% if item['list_items'] %}
+				{% include "@larva/modules/list/list.twig" with item %}
+			{% endif %}
+		</li>
+	{% endfor %}
+</{{ list_type_name }}l>

package/modules/listicle-item/listicle-item.prototype.js

@@ -0,0 +1,11 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const o_collection_item = clonedeep( require( '../../objects/o-collection-item/o-collection-item.prototype' ) );
+
+o_collection_item.o_collection_item_classes = 'a-floated-parent';
+o_collection_item.o_figure.o_figure_classes = 'a-floated-left@tablet lrv-u-padding-r-1@tablet';
+
+module.exports = {
+	listicle_item_classes: 'lrv-a-wrapper',
+	o_collection_item: o_collection_item
+};

package/modules/listicle-item/listicle-item.twig

@@ -0,0 +1,3 @@
+<section class="listicle-item // {{ listicle_item_classes }}">
+	{% include "@larva/objects/o-collection-item/o-collection-item.twig" with o_collection_item %}
+</section>

package/modules/mega-menu/mega-menu.prototype.js

@@ -0,0 +1,16 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const mega_menu_footer_prototype = require( '../mega-menu-footer/mega-menu-footer.prototype.js' );
+const mega_menu_footer = clonedeep( mega_menu_footer_prototype );
+
+const mega_menu_content_prototype = require( '../mega-menu-content/mega-menu-content.prototype.js' );
+const mega_menu_content = clonedeep( mega_menu_content_prototype );
+
+module.exports = {
+	mega_menu_footer,
+	mega_menu_content,
+	mega_menu_classes: '',
+	mega_menu_outer_classes: 'lrv-a-wrapper',
+	mega_menu_inner_classes: 'lrv-u-background-color-white lrv-u-flex lrv-u-flex-direction-column lrv-u-border-b-2 lrv-u-border-r-2 lrv-u-border-l-2',
+	mega_menu_content_outer_classes: 'lrv-u-background-color-white lrv-u-padding-a-150 lrv-u-width-100p',
+};

package/modules/mega-menu/mega-menu.twig

@@ -0,0 +1,10 @@
+<nav class="mega-menu // js-MegaMenu {{ mega_menu_classes }} ">
+	<div class="mega-menu-outer // {{ mega_menu_outer_classes }} ">
+		<div class="mega-menu-inner // {{ mega_menu_inner_classes }} ">
+			<div class="mega-menu-content-outer // {{ mega_menu_content_outer_classes }} ">
+				{% include "@larva/modules/mega-menu-content/mega-menu-content.twig" with mega_menu_content %}
+			</div>
+			{% include "@larva/modules/mega-menu-footer/mega-menu-footer.twig" with mega_menu_footer %}
+		</div>
+	</div>
+</nav>

package/modules/mega-menu-content/mega-menu-content.prototype.js

@@ -0,0 +1,10 @@
+const clonedeep = require( 'lodash.clonedeep' );
+const mega_menu_item = clonedeep( require( '../mega-menu-item/mega-menu-item.prototype' ) );
+
+module.exports = {
+	mega_menu_content_items: [
+		mega_menu_item,
+		mega_menu_item,
+	],
+	mega_menu_content_classes: 'lrv-u-flex lrv-u-flex-wrap-wrap lrv-a-unstyle-list lrv-u-background-color-white lrv-a-space-children--050 lrv-a-space-children-horizontal '
+};

package/modules/mega-menu-content/mega-menu-content.twig

@@ -0,0 +1,5 @@
+<ul class="mega-menu-content // mega-menu__parent-list {{ mega_menu_content_classes }} ">
+	{% for item in mega_menu_content_items %}
+		{% include "@larva/modules/mega-menu-item/mega-menu-item.twig" with item %}
+	{% endfor %}
+</ul>

package/modules/mega-menu-footer/mega-menu-footer.prototype.js

@@ -0,0 +1,41 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const mega_menu_subscribe = clonedeep( require( '../mega-menu-footer-subscribe/mega-menu-footer-subscribe.prototype' ) );
+const social_heading = clonedeep( require( '../../modules/heading/heading.prototype' ) );
+const newsletter_heading = clonedeep( require( '../../modules/heading/heading.prototype' ) );
+const o_social_list = clonedeep( require( '../../objects/o-social-list/o-social-list.prototype' ) );
+
+social_heading.heading_level_text = '3';
+social_heading.heading_classes = 'lrv-a-font-body-xs lrv-u-margin-b-050 lrv-u-margin-t-025 lrv-u-font-weight-normal lrv-u-text-transform-uppercase lrv-u-text-align-center lrv-u-display-inline-block@mobile-max lrv-u-vertical-align-middle\@mobile-max';
+social_heading.heading_markup = 'Follow Us';
+
+newsletter_heading.heading_level_text = '3';
+newsletter_heading.heading_classes = 'email-form-heading lrv-u-background-color-white lrv-a-font-body-xs lrv-u-width-70p lrv-u-margin-b-125 lrv-u-text-align-center lrv-u-font-weight-normal lrv-u-text-transform-uppercase lrv-u-padding-lr-075 lrv-u-border-r-1 lrv-u-border-l-1 lrv-u-border-r-00@mobile-max lrv-u-border-l-00@mobile-max';
+newsletter_heading.heading_markup = 'Alerts & Newsletters';
+
+const o_email_capture_form_prototype = require( '../../objects/o-email-capture-form/o-email-capture-form.prototype' );
+const o_email_capture_form = clonedeep( o_email_capture_form_prototype );
+
+o_email_capture_form.c_email_field.c_email_field_label_text = 'Email Address';
+o_email_capture_form.c_email_field.c_email_field_input_placeholder_attr = 'ENTER E-MAIL';
+o_email_capture_form.c_email_field.c_email_field_input_classes = 'lrv-u-width-100p';
+o_email_capture_form.c_email_field.c_email_field_classes = 'lrv-u-border-b-1 lrv-u-border-r-1 lrv-a-font-body-xxs lrv-u-margin-b-125 lrv-u-margin-b-00@mobile-max lrv-u-text-align-left lrv-u-width-75p@mobile-max';
+o_email_capture_form.c_email_field.c_email_field_label_classes = 'lrv-a-hidden';
+o_email_capture_form.o_email_capture_form_inner_classes = 'lrv-u-text-align-right lrv-u-align-items-center';
+o_email_capture_form.c_button.c_button_classes = 'lrv-a-font-body-xs lrv-a-icon-after lrv-u-text-transform-uppercase lrv-a-unstyle-button lrv-u-cursor-pointer lrv-u-flex lrv-u-justify-content-end lrv-u-width-100p@tablet lrv-a-glue-parent@tablet lrv-u-width-75p@mobile-max';
+o_email_capture_form.c_button.c_button_inner_classes = 'lrv-u-background-color-white lrv-u-padding-l-050';
+o_email_capture_form.c_button.c_button_text = 'Sign Up';
+
+module.exports = {
+	o_email_capture_form,
+	o_social_list,
+	social_heading,
+	mega_menu_subscribe,
+	newsletter_heading,
+	mega_menu_footer_classes: 'lrv-u-border-t-2 lrv-u-background-color-white',
+	mega_menu_footer_inner_classes: 'lrv-u-flex lrv-u-flex-direction-column@mobile-max',
+	mega_menu_footer_subscribe_classes: 'lrv-u-flex lrv-u-flex-direction-column@desktop-max lrv-u-align-items-center lrv-u-width-30p lrv-a-hidden@mobile-max lrv-u-border-r-6 lrv-u-margin-r-025',
+	mega_menu_footer_social_classes: 'lrv-u-flex lrv-u-flex-direction-column lrv-u-align-items-center lrv-u-padding-tb-050 lrv-u-width-20p lrv-u-width-100p@mobile-max lrv-u-border-r-1 lrv-u-border-l-1 lrv-u-border-r-00@mobile-max lrv-u-border-l-00@mobile-max lrv-u-padding-lr-050 lrv-u-display-block@mobile-max lrv-u-text-align-center@mobile-max lrv-u-border-b-2@mobile-max',
+	mega_menu_social_list_classes:' lrv-u-display-inline-block@mobile-max lrv-u-vertical-align-middle@mobile-max lrv-u-flex@tablet lrv-u-justify-content-center',
+	mega_menu_footer_form_classes: 'lrv-u-flex lrv-u-flex-direction-column lrv-u-align-items-center lrv-u-padding-tb-1 lrv-u-width-50p lrv-u-width-100p@mobile-max lrv-u-flex-direction-column lrv-u-padding-lr-125',
+}

package/modules/mega-menu-footer/mega-menu-footer.twig

@@ -0,0 +1,19 @@
+<footer class="mega-menu__footer // {{ mega_menu_footer_classes }} ">
+	<div class="mega-menu__footer-inner // {{ mega_menu_footer_inner_classes }} ">
+		<section class="mega-menu__footer-subscribe // {{ mega_menu_footer_subscribe_classes }} ">
+			{% include "@larva/modules/mega-menu-footer-subscribe/mega-menu-footer-subscribe.twig" with mega_menu_subscribe %}
+		</section>
+		<section class="mega-menu__footer-social // {{ mega_menu_footer_social_classes }} ">
+			{% include "@larva/modules/heading/heading.twig" with social_heading %}
+			<div class="mega-menu__social-list // {{ mega_menu_social_list_classes }}">
+				{% include "@larva/objects/o-social-list/o-social-list.twig" with o_social_list %}
+			</div>
+		</section>
+		<section class="mega-menu__footer-form // {{ mega_menu_footer_form_classes }} ">
+			{% include "@larva/modules/heading/heading.twig" with newsletter_heading %}
+			<div class="lrv-u-flex-grow-1 lrv-u-width-100p">
+				{% include "@larva/objects/o-email-capture-form/o-email-capture-form.twig" with o_email_capture_form %}
+			</div>
+		</section>
+	</div>
+</footer>

package/modules/mega-menu-footer-subscribe/mega-menu-footer-subscribe.prototype.js

@@ -0,0 +1,20 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_lazy_image_prototype = require( '../../components/c-lazy-image/c-lazy-image.prototype.js' );
+const c_lazy_image = clonedeep( c_lazy_image_prototype );
+
+const c_icon_prototype = require( '../../components/c-icon/c-icon.prototype.js' );
+const c_icon = clonedeep( c_icon_prototype );
+
+c_icon.c_icon_classes = 'lrv-a-glue lrv-a-glue--l-0 lrv-a-glue--t-50p lrv-u-transform-translateY-n50p lrv-u-width-50';
+
+c_lazy_image.c_lazy_image_src_url = 'https://cdn.shopify.com/s/files/1/0238/6647/products/2019_37_540x.jpg';
+c_lazy_image.c_lazy_image_placeholder_url = 'https://cdn.shopify.com/s/files/1/0238/6647/products/2019_37_540x.jpg';
+c_lazy_image.c_lazy_image_classes = 'lrv-u-padding-l-3';
+c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-2x3';
+
+module.exports = {
+	footer_subscribe_classes: 'lrv-a-glue-parent lrv-u-width-100p',
+	c_lazy_image,
+	c_icon
+};

package/modules/mega-menu-footer-subscribe/mega-menu-footer-subscribe.twig

@@ -0,0 +1,4 @@
+<div class="mega-menu-footer-subscribe // {{ footer_subscribe_classes }}">
+	{% include "@larva/components/c-icon/c-icon.twig" with c_icon %}
+	{% include "@larva/components/c-lazy-image/c-lazy-image.twig" with c_lazy_image %}
+</div>

package/modules/mega-menu-item/mega-menu-item.prototype.js

@@ -0,0 +1,23 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_link = clonedeep( require( '../../components/c-link/c-link.prototype' ) );
+const c_link__parent = clonedeep( c_link );
+const c_link__child = clonedeep( c_link );
+
+c_link__parent.c_link_text = 'Parent item';
+c_link__parent.c_link_classes = 'lrv-a-unstyle-link lrv-u-color-brand-primary-dark:hover lrv-u-font-weight-bold lrv-a-font-body-xs lrv-u-text-transform-uppercase';
+
+c_link__child.c_link_text = 'Child item';
+c_link__child.c_link_classes = 'lrv-a-unstyle-link lrv-u-color-brand-primary-dark:hover lrv-u-padding-tb-025 lrv-u-display-block lrv-a-font-body-xs';
+
+module.exports = {
+	c_link: c_link__parent,
+	mega_menu_item_children: [
+		c_link__child,
+		c_link__child,
+		c_link__child
+	],
+	mega_menu_item_classes:'lrv-a-unstyle-list',
+	mega_menu_item_link_classes:'lrv-u-flex lrv-u-color-black   lrv-u-display-inline-block lrv-u-width-100p',
+	mega_menu_child_list_classes:'lrv-a-unstyle-list lrv-u-padding-t-1 lrv-u-margin-b-125'
+};

package/modules/mega-menu-item/mega-menu-item.twig

@@ -0,0 +1,13 @@
+<li class="mega-menu-item // mega-menu__parent-list-item {{ mega_menu_item_classes }} ">
+	<div class="mega-menu__item-link // {{ mega_menu_item_link_classes }} ">
+		{% include "@larva/components/c-link/c-link.twig" with c_link %}
+	</div>
+
+	<ul class="mega-menu__child-list // {{ mega_menu_child_list_classes }} ">
+		{% for item in mega_menu_item_children %}
+			<li class="mega-menu__child-list-item ">
+				{% include "@larva/components/c-link/c-link.twig" with item %}
+			</li>
+		{% endfor %}
+	</ul>
+</li>

package/modules/more-stories-button/more-stories-button.profile.js

@@ -0,0 +1,12 @@
+const clonedeep = require( 'lodash.clonedeep' );
+const more_stories_button_prototype = require( './more-stories-button.prototype' );
+
+const more_stories_button_profile = clonedeep( more_stories_button_prototype );
+
+more_stories_button_profile.c_button.c_button_classes = 'js-ProfileFilter-loadMore lrv-a-unstyle-button lrv-u-cursor-pointer lrv-u-padding-tb-050 lrv-u-padding-lr-1 lrv-u-background-color-black lrv-u-color-white lrv-u-color-white:hover lrv-u-text-align-center lrv-u-font-size-28 lrv-u-display-block lrv-u-border-radius-5 lrv-u-width-100p lrv-u-font-family-primary lrv-u-font-weight-bold';
+more_stories_button_profile.c_button.c_button_url = false;
+more_stories_button_profile.c_button.c_button_text = 'Load More';
+more_stories_button_profile.c_button_prev = false;
+more_stories_button_profile.c_button_next = false
+
+module.exports = more_stories_button_profile;

package/modules/more-stories-button/more-stories-button.prototype.js

@@ -0,0 +1,29 @@
+const clonedeep = require( 'lodash.clonedeep' );
+const c_button_basic_prototype = require( '../../components/c-button/c-button.brand-basic' );
+
+const c_button_struct = clonedeep( c_button_basic_prototype );
+
+c_button_struct.c_button_classes += ' lrv-u-color-white:hover lrv-u-border-radius-5 lrv-u-text-align-center lrv-u-font-size-28';
+
+const c_button = clonedeep( c_button_struct );
+const c_button_prev = clonedeep( c_button_struct );
+const c_button_next = clonedeep( c_button_struct );
+
+c_button.c_button_classes += ' lrv-u-display-block lrv-u-width-100p';
+c_button.c_button_text = 'More Stories';
+c_button.c_button_url = '#';
+
+c_button_prev.c_button_classes += ' lrv-a-icon-arrow-left lrv-a-icon-invert lrv-a-icon-before lrv-u-font-size-18 lrv-u-justify-content-center';
+c_button_prev.c_button_text = 'Previous';
+c_button_prev.c_button_url = '#';
+
+c_button_next.c_button_classes += ' lrv-a-icon-arrow-right lrv-a-icon-invert lrv-a-icon-after lrv-u-font-size-18 lrv-u-justify-content-center lrv-u-margin-l-auto';
+c_button_next.c_button_text = 'Next';
+c_button_next.c_button_url = '#';
+
+module.exports = {
+	more_stories_button_classes: 'lrv-u-font-weight-bold lrv-u-font-family-primary',
+	c_button: c_button,
+	c_button_prev: c_button_prev,
+	c_button_next: c_button_next,
+};

package/modules/more-stories-button/more-stories-button.twig

@@ -0,0 +1,13 @@
+<nav class="more-stories-button // lrv-u-flex lrv-u-justify-content-space-between {{ more_stories_button_classes }}">
+	{% if c_button %}
+		{% include "@larva/components/c-button/c-button.twig" with c_button %}
+	{% endif %}
+
+	{% if c_button_prev %}
+		{% include "@larva/components/c-button/c-button.twig" with c_button_prev %}
+	{% endif %}
+
+	{% if c_button_next %}
+		{% include "@larva/components/c-button/c-button.twig" with c_button_next %}
+	{% endif %}
+</nav>

package/modules/newsletter/newsletter.prototype.js

@@ -0,0 +1,46 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_title_prototype = require( '../../components/c-title/c-title.prototype' );
+const c_title = clonedeep( c_title_prototype );
+
+const c_logo_prototype = require( '../../components/c-logo/c-logo.prototype' );
+const c_logo = clonedeep( c_logo_prototype );
+
+const o_email_capture_form_prototype = require( '../../objects/o-email-capture-form/o-email-capture-form.prototype' );
+const o_email_capture_form = clonedeep( o_email_capture_form_prototype );
+
+const c_tagline_prototype = require( '../../components/c-tagline/c-tagline.prototype' );
+const c_tagline = clonedeep( c_tagline_prototype );
+
+const c_tagline_terms = clonedeep( c_tagline_prototype );
+
+c_tagline.c_tagline_classes = 'lrv-u-margin-t-1 lrv-u-margin-b-00 lrv-u-text-align-center lrv-u-font-size-20 lrv-u-line-height-small lrv-u-margin-b-2';
+c_tagline.c_tagline_text = 'Sign Up for our Newsletters';
+
+c_logo.c_logo_classes = 'lrv-a-unstyle-link lrv-u-display-contents lrv-u-width-100p lrv-u-color-black';
+
+o_email_capture_form.c_email_field.c_email_field_input_placeholder_attr = 'Email';
+o_email_capture_form.c_email_field.c_email_field_input_classes += ' lrv-u-border-a-0 lrv-u-font-size-14 lrv-u-width-100p lrv-u-margin-b-1 lrv-u-padding-lr-1 lrv-u-padding-tb-050 lrv-u-border-radius-5';
+o_email_capture_form.c_email_field.c_email_field_input_id_attr = 'EmailAddress';
+o_email_capture_form.c_email_field.c_email_field_input_name_attr = 'EmailAddress';
+o_email_capture_form.c_button.c_button_text = 'Subscribe Today';
+o_email_capture_form.c_button.c_button_classes += ' lrv-u-background-color-black lrv-u-color-white lrv-u-border-radius-5 lrv-u-width-100p lrv-u-text-align-center lrv-u-padding-a-050 lrv-u-font-weight-bold';
+o_email_capture_form.c_email_field.c_email_field_label_classes = 'lrv-a-screen-reader-only';
+o_email_capture_form.c_email_field.c_email_field_label_text = 'Email Address';
+
+c_tagline_terms.c_tagline_classes = 'lrv-u-margin-t-1';
+c_tagline_terms.c_tagline_text = false;
+c_tagline_terms.c_tagline_markup = 'By subscribing, I agree to the <a href="#">Terms of Use</a> and <a href="#">Privacy Policy</a>.';
+
+module.exports = {
+	newsletter_classes: 'lrv-u-padding-tb-2 lrv-u-padding-lr-2 lrv-u-flex lrv-u-flex-direction-column lrv-u-align-items-center',
+	newsletter_typography_class: '',
+	newsletter_text_align_class: '',
+	newsletter_color_class: '',
+	newsletter_background_color_class: '',
+	c_title: c_title,
+	c_logo: c_logo,
+	c_tagline: c_tagline,
+	o_email_capture_form: o_email_capture_form,
+	c_tagline_terms: c_tagline_terms,
+};

package/modules/newsletter/newsletter.twig

@@ -0,0 +1,21 @@
+<div class="newsletter // {{ newsletter_classes }} {{ newsletter_typography_class }} {{ newsletter_text_align_class }} {{ newsletter_color_class }} {{ newsletter_background_color_class }}">
+	{% if c_title %}
+		{% include "@larva/components/c-title/c-title.twig" with c_title %}
+	{% endif %}
+
+	{% if c_logo %}
+		{% include "@larva/components/c-logo/c-logo.twig" with c_logo %}
+	{% endif %}
+
+	{% if c_tagline %}
+		{% include "@larva/components/c-tagline/c-tagline.twig" with c_tagline %}
+	{% endif %}
+
+	{% if o_email_capture_form %}
+		{% include "@larva/objects/o-email-capture-form/o-email-capture-form.twig" with o_email_capture_form %}
+	{% endif %}
+
+	{% if c_tagline_terms %}
+		{% include "@larva/components/c-tagline/c-tagline.twig" with c_tagline_terms %}
+	{% endif %}
+</div>

package/modules/newsletter-cta/newsletter-cta.prototype.js

@@ -0,0 +1,21 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_heading = clonedeep( require( '@penskemediacorp/larva-patterns/components/c-heading/c-heading.prototype' ) );
+const c_tagline = clonedeep( require( '@penskemediacorp/larva-patterns/components/c-tagline/c-tagline.prototype' ) );
+const c_button = clonedeep( require( '@penskemediacorp/larva-patterns/components/c-button/c-button.brand-basic' ) );
+
+c_heading.c_heading_text = 'Newsletters';
+c_heading.c_heading_classes = 'lrv-u-text-transform-uppercase';
+c_tagline.c_tagline_text = 'Sign up for news straight to your inbox every day';
+c_tagline.c_tagline_classes = 'lrv-u-margin-a-00 lrv-u-margin-b-150@mobile-max';
+c_button.c_button_text = 'Subscribe';
+c_button.c_button_url = '#';
+c_button.c_button_target_attr = '_blank';
+c_button.c_button_classes += ' lrv-a-unstyle-link lrv-u-color-white:hover lrv-u-background-color-black:hover lrv-a-hover-effect';
+
+module.exports = {
+	newsletter_cta_classes: 'lrv-u-margin-tb-125 lrv-u-margin-tb-150@desktop-xl lrv-u-padding-tb-2 lrv-u-flex lrv-u-justify-content-space-between lrv-u-border-t-1 lrv-u-border-b-1 lrv-u-align-items-center lrv-u-flex-direction-column@mobile-max lrv-u-padding-a-2@mobile-max',
+	c_heading,
+	c_tagline,
+	c_button,
+};

package/modules/newsletter-cta/newsletter-cta.twig

@@ -0,0 +1,22 @@
+<div class="newsletter-cta">
+	<div class="{{ newsletter_cta_classes }}">
+		<div class="lrv-u-text-align-center@mobile-max">
+			{% if c_logo %}
+				{% include "@larva/components/c-logo/c-logo.twig" with c_logo %}
+			{% endif %}
+
+			{% if c_heading %}
+				{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
+			{% endif %}
+
+			{% if c_tagline %}
+				{% include "@larva/components/c-tagline/c-tagline.twig" with c_tagline %}
+			{% endif %}
+
+		</div>
+
+		{% if c_button %}
+			{% include "@larva/components/c-button/c-button.twig" with c_button %}
+		{% endif %}
+	</div>
+</div>

package/modules/newswire/newswire.prototype.js

@@ -0,0 +1,46 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const o_card_prototype = require( '../../objects/o-card/o-card.prototype' );
+const c_span_prototype = require( '../../components/c-span/c-span.prototype' );
+const c_timestamp_prototype = require( '../../components/c-timestamp/c-timestamp.prototype' );
+const c_heading_prototype = require( '../../components/c-heading/c-heading.prototype' );
+const c_title_prototype = require( '../../components/c-title/c-title.prototype' );
+const c_svg_prototype = require( '../../components/c-svg/c-svg.prototype' );
+
+const o_card = clonedeep( o_card_prototype );
+const c_span = clonedeep( c_span_prototype );
+const c_timestamp = clonedeep( c_timestamp_prototype );
+const c_heading = clonedeep( c_heading_prototype );
+const c_title = clonedeep( c_title_prototype );
+const c_svg = clonedeep( c_svg_prototype );
+
+c_heading.c_heading_text = 'Newswire';
+c_heading.c_heading_classes = 'lrv-u-font-family-primary lrv-u-font-size-32 lrv-u-margin-b-050';
+
+c_span.c_span_classes += ' lrv-u-display-block lrv-u-font-size-14 lrv-u-margin-tb-050 lrv-u-display-block';
+
+c_timestamp.c_timestamp_classes = 'lrv-u-font-size-12 lrv-u-color-grey lrv-u-margin-t-auto@desktop';
+
+c_title.c_title_text = 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi expedita pariatur sint eveniet.';
+c_title.c_title_classes += ' lrv-u-font-size-12 lrv-u-font-size-14@desktop lrv-u-font-weight-normal lrv-u-margin-b-050';
+c_title.c_title_url = false;
+
+o_card.o_card_classes = 'lrv-u-flex lrv-u-flex-direction-column';
+o_card.o_card_link_url = '#';
+o_card.o_card_link_classes = 'lrv-a-unstyle-link lrv-u-display-block';
+o_card.o_card_image_wrap_classes = '';
+o_card.c_lazy_image.c_lazy_image_classes += ' lrv-a-hover-effect lrv-a-hover-effect--fade';
+o_card.c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-4x3';
+o_card.c_span = c_span;
+o_card.c_title = c_title;
+o_card.c_timestamp = c_timestamp;
+o_card.c_svg = c_svg;
+
+module.exports = {
+	newswire_classes: 'lrv-a-wrapper lrv-u-padding-b-2',
+	newswire_list_classes: 'lrv-a-unstyle-list js-Flickity js-Flickity--fourths js-Flickity--isContained js-Flickity--nav-top-right js-Flickity--bordered-buttons js-Flickity--isFreeScrol js-Flickity--newswire lrv-u-padding-l-00',
+	newswire_list_item_classes: 'js-Flickity-cell lrv-u-margin-r-150',
+	c_heading: c_heading,
+	newswire_aria_labelledby_attr: c_heading.c_heading_id_attr,
+	newswire_items: [ o_card, o_card, o_card, o_card, o_card ]
+};

package/modules/newswire/newswire.twig

@@ -0,0 +1,16 @@
+<section class="newswire // {{ newswire_classes }}">
+	{% if c_heading %}
+		{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
+	{% endif %}
+	<ul class="{{ newswire_list_classes }}"
+		{% if newswire_aria_labelledby_attr %}
+			aria-labelledby="{{ newswire_aria_labelledby_attr }}"
+		{% endif %}
+	>
+		{% for item in newswire_items %}
+			<li class="{{ newswire_list_item_classes }}">
+				{% include "@larva/objects/o-card/o-card.twig" with item %}
+			</li>
+		{% endfor %}
+	</ul>
+</section>

package/modules/page-404/page-404.prototype.js

@@ -0,0 +1,44 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_heading_prototype = require( '@penskemediacorp/larva-patterns/components/c-heading/c-heading.prototype' );
+const c_heading = clonedeep( c_heading_prototype );
+
+const c_svg_prototype = require( '../../components/c-svg/c-svg.prototype.js' );
+const c_svg = clonedeep( c_svg_prototype );
+
+const c_title_prototype = require( '@penskemediacorp/larva-patterns/components/c-title/c-title.prototype' );
+const c_title = clonedeep( c_title_prototype );
+
+const c_button_prototype = require( '@penskemediacorp/larva-patterns/components/c-button/c-button.prototype' );
+const c_button_home = clonedeep( c_button_prototype );
+const c_button_search = clonedeep( c_button_prototype );
+
+c_heading.c_heading_text = '404';
+c_heading.c_heading_classes = 'lrv-a-screen-reader-only';
+c_heading.c_heading_is_primary_heading = true;
+
+c_svg.c_svg_name = 'logo-404';
+c_svg.c_svg_classes = 'lrv-u-max-width-100p';
+
+c_title.c_title_text = 'OOPS! Something went wrong here!';
+c_title.c_title_classes = 'lrv-a-font-secondary-l lrv-u-text-transform-uppercase lrv-u-margin-b-125';
+c_title.c_title_url = false;
+
+c_button_home.c_button_text = 'Back To Homepage';
+c_button_home.c_button_url = '/';
+c_button_home.c_button_classes += ' lrv-u-background-color-black lrv-u-margin-lr-075 lrv-u-text-transform-uppercase lrv-u-font-weight-bold u-background-color-brand-primary-dark:hover lrv-u-color-white lrv-u-color-white:hover lrv-u-padding-tb-050 lrv-u-padding-lr-1';
+
+c_button_search.c_button_text = 'Head To Search';
+c_button_search.c_button_url = '#';
+c_button_search.c_button_classes += ' lrv-u-background-color-black lrv-u-margin-lr-075 lrv-u-text-transform-uppercase lrv-u-font-weight-bold u-background-color-brand-primary-dark:hover lrv-u-color-white lrv-u-color-white:hover lrv-u-padding-tb-050 lrv-u-padding-lr-1 lrv-u-margin-t-050@mobile-max';
+
+module.exports = {
+	c_heading,
+	c_title: c_title,
+	c_button_home,
+	c_button_search,
+	c_svg,
+	wrapper_classes: 'lrv-u-text-align-center lrv-u-padding-t-1 lrv-u-padding-b-2 lrv-u-margin-b-2 lrv-u-max-width-830 lrv-u-margin-lr-auto',
+	page_404_inner_classes: 'lrv-u-margin-lr-auto lrv-u-padding-lr-1',
+	button_outer_classes: 'lrv-u-flex lrv-u-justify-content-center lrv-u-align-items-center lrv-u-flex-direction-column@mobile-max',
+};

package/modules/page-404/page-404.twig

@@ -0,0 +1,32 @@
+<section class="page-404 // {{ wrapper_classes }}">
+	<div class="{{ page_404_inner_classes }}">
+		{% if c_heading %}
+			{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
+		{% endif %}
+
+		{% if c_svg %}
+			{% include "@larva/components/c-svg/c-svg.twig" with c_svg %}
+		{% endif %}
+
+		{% if c_title %}
+			{% include "@larva/components/c-title/c-title.twig" with c_title %}
+		{% endif %}
+
+		{% if c_tagline %}
+			{% include "@larva/components/c-tagline/c-tagline.twig" with c_tagline %}
+		{% endif %}
+
+		<div class="buttons-outer {{ button_outer_classes }}">
+
+			{% if c_button_home %}
+				{% include "@larva/components/c-button/c-button.twig" with c_button_home %}
+			{% endif %}
+
+			{% if c_button_search %}
+				{% include "@larva/components/c-button/c-button.twig" with c_button_search %}
+			{% endif %}
+
+		</div>
+
+	</div>
+</section>

package/modules/paragraph/paragraph.narrow.js

@@ -0,0 +1,8 @@
+const clonedeep = require('lodash.clonedeep');
+
+const paragraph_prototype = require( './paragraph.prototype' );
+const paragraph_narrow = clonedeep( paragraph_prototype );
+
+paragraph_narrow.paragraph_classes += ' lrv-u-width-75p';
+
+module.exports = paragraph_narrow;

package/modules/paragraph/paragraph.prototype.js

@@ -0,0 +1,8 @@
+module.exports = {
+	paragraph_classes: 'lrv-u-margin-lr-auto',
+	paragraph_typography_class: 'lrv-a-font-body-m',
+	paragraph_text_align_class: '',
+	paragraph_color_class: '',
+	paragraph_background_color_class: '',
+	paragraph_markup: 'Paragraph Text.',
+};

package/modules/paragraph/paragraph.twig

@@ -0,0 +1,3 @@
+<p class="paragraph larva // {{ paragraph_classes }} {{ paragraph_typography_class }} {{ paragraph_text_align_class }} {{ paragraph_color_class }} {{ paragraph_background_color_class }}">
+	{{ paragraph_markup|raw }}
+</p>