@penskemediacorp/larva-patterns 1.8.0-alpha.0 → 1.9.0

package/modules/profile-card-list/profile-card-list.twig

@@ -0,0 +1,7 @@
+<ul class="profile-card-list // {{ profile_card_list_classes }} lrv-a-unstyle-list">
+{% for item in profile_card_list %}
+	<li>
+		{% include "@larva/modules/profile-blurb/profile-blurb.twig" with item %}
+	</li>
+{% endfor %}
+</ul>

package/modules/profile-filter/profile-filter.prototype.js

@@ -0,0 +1,26 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_heading = clonedeep( require( '../../components/c-heading/c-heading.prototype' ) );
+const o_checkbox_input_list = clonedeep( require( '../../objects/o-checkbox-input-list/o-checkbox-input-list.prototype' ) );
+const c_button = clonedeep( require( '../../components/c-button/c-button.prototype' ) );
+
+c_heading.c_heading_text = 'Filter:';
+c_heading.c_heading_classes = 'lrv-u-font-size-20 lrv-u-text-transform-uppercase lrv-u-border-b-1 lrv-u-margin-b-1 lrv-u-padding-b-025';
+
+o_checkbox_input_list.c_title.c_title_text = 'Location';
+o_checkbox_input_list.c_title.c_title_classes = 'lrv-u-font-family-primary lrv-u-font-size-14 lrv-u-margin-b-025 lrv-u-text-transform-uppercase lrv-u-font-weight-bold';
+o_checkbox_input_list.o_checkbox_input_list_items_classes += ' lrv-u-font-family-primary lrv-u-font-size-12 lrv-u-line-height-large';
+
+c_button.c_button_text = 'Filter';
+c_button.c_button_classes += ' lrv-u-text-transform-uppercase lrv-u-background-color-black lrv-u-color-white lrv-u-font-size-12 lrv-u-font-family-primary lrv-u-margin-t-1 lrv-u-color-grey-light:hover lrv-u-padding-lr-2 lrv-u-padding-tb-050';
+
+module.exports = {
+	profile_filter_classes: 'lrv-u-padding-a-1',
+	c_heading: c_heading,
+	o_checkbox_input_list: [
+		o_checkbox_input_list,
+		o_checkbox_input_list,
+		o_checkbox_input_list
+	],
+	c_button: c_button
+};

package/modules/profile-filter/profile-filter.twig

@@ -0,0 +1,15 @@
+<form class="profile-filter // {{ profile_filter_classes }}" method="post" action="{{ profile_filter_action_url }}">
+	{% if c_heading %}
+		{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
+	{% endif %}
+
+	<div class="lrv-a-space-children-vertical lrv-a-space-children--2">
+		{% for item in o_checkbox_input_list %}
+			{% include "@larva/objects/o-checkbox-input-list/o-checkbox-input-list.twig" with item %}
+		{% endfor %}
+	</div>
+
+	{% if c_button %}
+		{% include "@larva/components/c-button/c-button.twig" with c_button %}
+	{% endif %}
+</form>

package/modules/profile-gallery/profile-gallery.prototype.js

@@ -0,0 +1,28 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_heading = clonedeep( require( '../../components/c-heading/c-heading.prototype' ) );
+const o_figure = clonedeep( require( '../../objects/o-figure/o-figure.prototype' ) );
+
+c_heading.c_heading_text = 'Explore Their Gallery';
+c_heading.c_heading_classes = 'lrv-u-font-family-secondary lrv-u-font-size-32 lrv-u-padding-b-1';
+
+o_figure.c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-4x3';
+
+o_figure.c_figcaption.c_figcaption_classes = 'lrv-u-flex lrv-u-flex-direction-column lrv-u-font-size-10 lrv-u-margin-t-050';
+o_figure.c_figcaption.c_figcaption_caption_classes = 'lrv-u-margin-b-025';
+o_figure.c_figcaption.c_figcaption_credit_classes = 'lrv-u-text-transform-uppercase lrv-u-color-grey-dark';
+
+module.exports = {
+	profile_gallery_classes: 'lrv-u-padding-tb-1',
+	c_heading: c_heading,
+	galleries: [
+		o_figure,
+		o_figure,
+		o_figure,
+		o_figure,
+		o_figure,
+		o_figure,
+		o_figure,
+		o_figure
+	]
+}

package/modules/profile-gallery/profile-gallery.twig

@@ -0,0 +1,13 @@
+<div class="profile-gallery // {{ profile_gallery_classes }} ">
+	{% if c_heading %}
+		{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
+	{% endif %}
+
+	<div class="js-Flickity js-Flickity--profile js-Flickity--isContained js-Flickity--nav-top-right js-Flickity--bordered-buttons js-Flickity--isFreeScroll">
+		{% for item in galleries %}
+			<div class="js-Flickity-cell lrv-u-margin-lr-050 u-margin-lr-1@tablet">
+				{% include "@larva/objects/o-figure/o-figure.twig" with item %}
+			</div>
+		{% endfor %}
+	</div>
+</div>

package/modules/profile-header/profile-header.prototype.js

@@ -0,0 +1,29 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const o_nav = clonedeep( require( '../../objects/o-nav/o-nav.prototype' ) );
+const o_select_nav = clonedeep( require( '../../objects/o-select-nav/o-select-nav.prototype' ) );
+
+const o_sponsored_by_prototype = require( '../../objects/o-sponsored-by/o-sponsored-by.prototype' );
+const o_sponsored_by = clonedeep( o_sponsored_by_prototype );
+
+o_sponsored_by.c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-5x1 lrv-u-width-100';
+
+o_nav.o_nav_classes = 'lrv-u-flex lrv-u-justify-content-center';
+o_nav.o_nav_list_classes += ' lrv-u-flex lrv-a-space-children-horizontal lrv-u-align-items-center lrv-u-a-unstyle-list';
+o_nav.o_nav_list_item_classes = 'lrv-u-text-transform-uppercase lrv-u-color-white lrv-u-font-size-18';
+
+o_select_nav.o_select_nav_classes += ' lrv-u-display-inline-block';
+o_select_nav.c_button.c_button_text = 'Year 2019';
+o_select_nav.c_button.c_button_classes += ' lrv-u-color-white lrv-u-color-white:hover lrv-u-text-transform-uppercase lrv-u-font-size-16 lrv-u-border-color-white lrv-u-border-a-1 lrv-u-padding-lr-1 lrv-u-padding-tb-025 lrv-u-line-height-small lrv-a-icon-after lrv-a-icon-invert lrv-a-icon-arrow-down';
+
+module.exports = {
+	profile_header_classes: '',
+	profile_header_banner_classes: '',
+	profile_header_title_classes: 'lrv-u-font-family-primary lrv-u-font-size-50@desktop lrv-u-font-size-24 lrv-u-text-transform-uppercase lrv-u-font-weight-bold lrv-u-margin-b-050',
+	profile_header_title_text: 'Top 200 Collectors',
+	profile_header_nav_classes: 'lrv-u-background-color-grey-darkest lrv-u-padding-tb-050 lrv-u-border-t-1 lrv-u-border-color-white',
+	profile_header_o_select_nav_classes: '',
+	o_nav: o_nav,
+	o_sponsored_by: o_sponsored_by,
+	o_select_nav: o_select_nav
+};

package/modules/profile-header/profile-header.twig

@@ -0,0 +1,27 @@
+<header class="profile-header // {{ profile_header_classes }}">
+
+	<div class="profile-header__banner // {{ profile_header_banner_classes }}">
+		<div class="lrv-a-wrapper lrv-u-flex lrv-u-flex-direction-column lrv-u-align-items-center lrv-u-padding-tb-1">
+			<h1 class="{{ profile_header_title_classes }}">
+				{{ profile_header_title_text }}
+			</h1>
+
+			{% if o_sponsored_by %}
+				{% include "@larva/objects/o-sponsored-by/o-sponsored-by.twig" with o_sponsored_by %}
+			{% endif %}
+
+		</div>
+	</div>
+
+	<div class="profile-header__nav // {{ profile_header_nav_classes }}">
+		<div class="lrv-a-wrapper lrv-a-glue-parent">
+			{% include "@larva/objects/o-nav/o-nav.twig" with o_nav %}
+
+			{% if o_select_nav %}
+				<div class="{{ profile_header_o_select_nav_classes }}">
+					{% include "@larva/objects/o-select-nav/o-select-nav.twig" with o_select_nav %}
+				</div>
+			{% endif %}
+		</div>
+	</div>
+</header>

package/modules/profile-highlights/profile-highlights.prototype.js

@@ -0,0 +1,22 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const profile_blurb = clonedeep( require( '../profile-blurb/profile-blurb.prototype' ) );
+const c_heading = clonedeep( require( '../../components/c-heading/c-heading.prototype' ) );
+
+c_heading.c_heading_classes = 'lrv-u-text-align-center lrv-u-font-size-36 lrv-u-font-size-46@desktop-xl lrv-u-font-family-secondary lrv-u-padding-b-2';
+c_heading.c_heading_text = 'Replace This Text';
+
+module.exports = {
+	profile_highlights_id_attr: 'profile-highlights',
+	profile_highlights_classes: '',
+	profile_highlights_slider_outer_classes: '',
+	profile_highlights_slider_classes: 'lrv-u-padding-a-1',
+	c_heading: c_heading,
+	slider_items: [
+		profile_blurb,
+		profile_blurb,
+		profile_blurb,
+		profile_blurb,
+		profile_blurb,
+	]
+};

package/modules/profile-highlights/profile-highlights.twig

@@ -0,0 +1,17 @@
+<section id="{{ profile_highlights_id_attr }}" class="profile-highlights // {{ profile_highlights_classes }}">
+
+	{% if c_heading %}
+		{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
+	{% endif %}
+
+	<div class="profile-highlights__slider // lrv-a-wrapper {{ profile_highlights_slider_outer_classes }}">
+		<div class="js-Flickity js-Flickity--100p js-Flickity--isContained js-Flickity--bordered-buttons {{ profile_highlights_slider_classes }}">
+			{% for item in slider_items %}
+				<div class="js-Flickity-cell lrv-u-margin-lr-050 u-margin-lr-1@tablet">
+					{% include "@larva/modules/profile-blurb/profile-blurb.twig" with item %}
+				</div>
+			{% endfor %}
+		</div>
+	</div>
+
+</section>

package/modules/profile-landing-header/profile-landing-header.prototype.js

@@ -0,0 +1,17 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_lazy_image = clonedeep( require( '../../components/c-lazy-image/c-lazy-image.prototype' ) );
+
+c_lazy_image.c_lazy_image_crop_class = 'a-crop-16x5';
+
+const c_button_black = clonedeep( require( '../../components/c-button/c-button.black' ) );
+
+c_button_black.c_button_classes += ' lrv-u-display-inline-block';
+c_button_black.c_button_text = 'Update this text';
+c_button_black.c_button_url = '#';
+
+module.exports = {
+	profile_body: clonedeep( require( '../../modules/profile-body/profile-body.prototype' ) ),
+	c_lazy_image: c_lazy_image,
+	c_button: c_button_black
+};

package/modules/profile-landing-header/profile-landing-header.twig

@@ -0,0 +1,12 @@
+<div class="profile-landing-header // {{ profile_landing_header_classes }}">
+
+	{% include "@larva/components/c-lazy-image/c-lazy-image.twig" with c_lazy_image %}
+
+	{% include "@larva/modules/profile-body/profile-body.twig" with profile_body %}
+
+	{% if c_button %}
+		<div class="lrv-u-text-align-center lrv-u-margin-tb-2">
+			{% include "@larva/components/c-button/c-button.twig" with c_button %}
+		</div>
+	{% endif %}
+</div>

package/modules/profile-landing-river/profile-landing-river.prototype.js

@@ -0,0 +1,21 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const story = clonedeep( require( '../../modules/story/story.prototype.js' ) );
+const c_heading = clonedeep( require( '../../components/c-heading/c-heading.prototype' ) );
+
+c_heading.c_heading_text = 'Latest News';
+c_heading.c_heading_classes = 'lrv-u-font-family-secondary lrv-u-font-size-28 lrv-u-font-size-40@tablet lrv-u-font-size-46@desktop-xl lrv-u-padding-r-1';
+
+c_heading.c_heading_outer = true;
+c_heading.c_heading_outer_classes = 'a-heading-border';
+
+module.exports = {
+	c_heading: c_heading,
+	profile_landing_river_id_attr: '',
+	profile_landing_river_classes: ' lrv-u-padding-t-2',
+	profile_landing_river_stories: [
+		story,
+		story,
+		story
+	]
+};

package/modules/profile-landing-river/profile-landing-river.twig

@@ -0,0 +1,13 @@
+<section id="{{ profile_landing_river_id_attr }}" class="profile-landing-river // {{ profile_landing_river_classes }}">
+	{% if c_heading %}
+		<div class="lrv-a-wrapper a-stacking-context">
+			{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
+		</div>
+	{% endif %}
+
+	<div class="lrv-a-wrapper a-children-border--grey-light a-children-border-vertical">
+		{% for item in profile_landing_river_stories %}
+			{% include "@larva/modules/story/story.twig" with item %}
+		{% endfor %}
+	</div>
+</section>

package/modules/profile-related-stories/profile-related-stories.prototype.js

@@ -0,0 +1,33 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_heading = clonedeep( require( '../../components/c-heading/c-heading.prototype' ) );
+const o_card_list = clonedeep( require( '../../objects/o-card-list/o-card-list.prototype' ) );
+
+c_heading.c_heading_text = 'Related Stories';
+c_heading.c_heading_classes = 'lrv-u-font-family-secondary lrv-u-font-size-28 lrv-u-font-size-40@tablet lrv-u-font-size-46@desktop-xl lrv-u-padding-r-1';
+
+o_card_list.o_card_list_classes += ' lrv-a-grid a-cols3@tablet';
+
+o_card_list.o_card_list_items.map( ( o_card ) => {
+
+	o_card.o_card_classes = 'lrv-u-flex lrv-u-flex-direction-column@tablet';
+
+	o_card.c_lazy_image.c_lazy_image_classes = 'lrv-u-flex-shrink-0 lrv-u-margin-r-1 lrv-u-margin-r-00@tablet';
+	o_card.c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-3x2';
+
+	o_card.c_span.c_span_text = 'News';
+	o_card.c_span.c_span_classes += ' lrv-u-font-size-12@mobile-max lrv-u-font-family-primary lrv-u-font-weight-bold lrv-u-display-block lrv-u-padding-b-050';
+	o_card.c_span.c_span_url = '#';
+
+	o_card.c_title.c_title_text = 'Guggenheim’s Hilma af Klint Survey Is Most Popular Show in Its History';
+	o_card.c_title.c_title_classes = 'lrv-u-font-family-primary lrv-u-font-size-14@mobile-max lrv-u-font-size-16 lrv-u-font-weight-normal';
+	o_card.c_title.c_title_link_classes = 'lrv-u-color-black';
+
+	o_card.c_timestamp = false;
+} );
+
+module.exports = {
+	profile_related_stories_classes: '',
+	c_heading: c_heading,
+	o_card_list: o_card_list,
+};

package/modules/profile-related-stories/profile-related-stories.twig

@@ -0,0 +1,9 @@
+<div class="profile-related-stories // {{ profile_related_stories_classes }}">
+	{% if c_heading %}
+		{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
+	{% endif %}
+
+	{% if o_card_list %}
+		{% include "@larva/objects/o-card-list/o-card-list.twig" with o_card_list %}
+	{% endif %}
+</div>

package/modules/pullquote/pullquote.prototype.js

@@ -0,0 +1,8 @@
+module.exports = {
+	pullquote_classes: 'lrv-u-width-75p',
+	pullquote_typography_class: 'lrv-a-font-body-m',
+	pullquote_text_align_class: 'lrv-u-text-align-center',
+	pullquote_color_class: '',
+	pullquote_background_color_class: '',
+	pullquote_markup: 'Pullquote Text.',
+};

package/modules/pullquote/pullquote.twig

@@ -0,0 +1,3 @@
+<blockquote class="pullquote larva // {{ pullquote_classes }} {{ pullquote_typography_class }} {{ pullquote_text_align_class }} {{ pullquote_color_class }} {{ pullquote_background_color_class }}">
+	{{ pullquote_markup }}
+</blockquote>

package/modules/read-next/read-next.prototype.js

@@ -0,0 +1,20 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_span_prototype = require( '../../components/c-span/c-span.prototype' );
+const c_span = clonedeep(  c_span_prototype );
+
+c_span.c_span_text = 'Read Next: ';
+c_span.c_span_classes += ' lrv-u-text-transform-uppercase  lrv-u-font-weight-bold';
+
+const c_title_prototype = require( '../../components/c-title/c-title.prototype' );
+const c_title = clonedeep( c_title_prototype );
+
+c_title.c_title_classes = 'lrv-u-padding-l-1 lrv-u-max-width-500 lrv-a-truncate-ellipsis lrv-u-font-weight-normal';
+c_title.c_title_text = 'Here is some really long title text, it should be truncated with lrv-a-truncate-ellispis, we hope!!!!!! Wow it\'s so long.';
+c_title.c_title_link_classes = 'lrv-a-unstyle-link';
+
+module.exports = {
+	read_next_classes: ' lrv-a-hidden@desktop-max lrv-u-flex lrv-u-align-items-center lrv-u-flex-1 lrv-u-font-family-body lrv-u-font-size-16',
+	c_span: c_span,
+	c_title: c_title,
+};

package/modules/read-next/read-next.twig

@@ -0,0 +1,4 @@
+<aside class="read-next // {{ read_next_classes }}">
+	{% include "@larva/components/c-span/c-span.twig" with c_span %}
+	{% include "@larva/components/c-title/c-title.twig" with c_title %}
+</aside>

package/modules/search-form/search-form.prototype.js

@@ -0,0 +1,8 @@
+module.exports = {
+	search_form_classes: '',
+	search_form_action_url: '#',
+	search_form_is_swiftype: false,
+	search_form_input_classes: '',
+	search_form_input_placeholder_attr: 'Search',
+	search_form_submit_classes: '',
+};

package/modules/search-form/search-form.twig

@@ -0,0 +1,11 @@
+{% if search_form_is_swiftype %}
+	<div data-st-search-form="small_search_form"></div>
+{% else %}
+	<form class="search-form {{ search_form_classes }}" action="{{ search_form_action_url }}" role="search" method="get">
+		<label>
+			<span class="lrv-a-screen-reader-only">Search for:</span>
+			<input class="{{ search_form_input_classes }}" type="search" placeholder="{{ search_form_input_placeholder_attr }}" value="" name="s">
+		</label>
+		<input class="{{ search_form_submit_classes }}" type="submit" value="Search">
+	</form>
+{% endif %}

package/modules/secondary-stories/secondary-stories.prototype.js

@@ -0,0 +1,119 @@
+const clonedeep = require('lodash.clonedeep');
+
+const o_card_prototype = require('@penskemediacorp/larva-patterns/objects/o-card/o-card.prototype.js')
+
+const o_author = clonedeep(require('@penskemediacorp/larva-patterns/objects/o-author/o-author.prototype'));
+o_author.c_span.c_span_classes = '';
+o_author.o_author_classes = 'lrv-u-text-transform-uppercase';
+o_author.o_author_text= 'By ';
+o_author.c_timestamp= false;
+o_author.c_span.c_span_link_classes = 'lrv-a-unstyle-link';
+o_card_prototype.o_author = o_author;
+
+const c_dek = clonedeep(require('@penskemediacorp/larva-patterns/components/c-dek/c-dek.prototype.js'));
+o_card_prototype.c_dek = c_dek;
+
+o_card_prototype.c_span = false;
+o_card_prototype.c_title.c_title_text = ' For Sahbabii, Recording His Debut Album Was Part of The Grieving Process';
+o_card_prototype.c_timestamp = false;
+o_card_prototype.o_card_content_classes ='lrv-u-align-items-start lrv-u-flex lrv-u-flex-direction-column';
+o_card_prototype.c_title.c_title_link_classes = 'lrv-a-unstyle-link lrv-u-color-brand-primary:hover';
+
+const article_kicker = clonedeep(require('@penskemediacorp/larva-patterns/modules/article-kicker/article-kicker.prototype.js'));
+article_kicker.article_kicker_classes = 'lrv-u-padding-b-050 lrv-u-border-b-1 lrv-u-text-transform-uppercase';
+article_kicker.article_kicker_link_classes = 'lrv-a-unstyle-link';
+o_card_prototype.article_kicker_outer_classes = 'lrv-u-padding-tb-1@desktop-xl';
+o_card_prototype.article_kicker = article_kicker;
+
+const o_card_1 = clonedeep(o_card_prototype);
+o_card_1.c_dek = false;
+o_card_1.article_kicker.article_kicker_text = 'Exclusive';
+o_card_1.c_title.c_title_text = ' It Started With Thirst Traps on TikTok. Now, She’s Accused of Running a BDSM Cult';
+o_card_1.article_kicker_outer_classes = 'lrv-a-font-basic-l lrv-a-glue-parent lrv-u-background-color-white lrv-u-flex lrv-u-padding-b-1 lrv-u-padding-l-1@mobile-max lrv-u-padding-r-1 lrv-u-padding-t-1@desktop-xl lrv-u-padding-t-1@mobile-max lrv-u-text-transform-uppercase u-margin-t-n187@desktop-xl u-margin-t-n187@mobile-max u-z-index-middle-bottom';
+o_card_1.article_kicker.article_kicker_classes += ' lrv-a-font-basic-l';
+o_card_1.c_title.c_title_classes = 'lrv-a-font-primary-xl lrv-u-padding-t-150@mobile-max lrv-u-padding-b-1@mobile-max lrv-u-padding-t-050@tablet lrv-u-padding-b-075@tablet';
+o_card_1.o_author.o_author_classes = 'lrv-a-font-body-s lrv-u-text-transform-uppercase lrv-u-color-black';
+o_card_1.o_card_classes = 'lrv-u-flex@tablet lrv-u-flex-direction-column@desktop-xl';
+o_card_1.o_card_image_wrap_classes = 'lrv-u-flex-basis-100p lrv-u-margin-r-175@tablet lrv-u-margin-r-00@desktop-xl';
+o_card_1.o_card_content_classes = 'lrv-u-align-items-start lrv-u-flex lrv-u-flex-basis-100p lrv-u-flex-direction-column lrv-u-padding-l-150@mobile-max lrv-u-padding-r-150@mobile-max';
+o_card_1.c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-3x2';
+
+const o_card_2 = clonedeep(o_card_prototype);
+
+o_card_2.article_kicker.article_kicker_text = 'AMERICAN MILITIA';
+o_card_2.c_title.c_title_text = 'Meet the Oath Keeper on the NRA’s Board of Directors';
+o_card_2.c_dek.c_dek_text = ' Links between the notorious militia and the gun lobby run deep';
+o_card_2.c_dek.c_dek_classes = 'lrv-u-margin-tb-075@desktop-xl lrv-a-hidden@desktop-max lrv-a-hidden@desktop-xl-max lrv-a-font-body-l lrv-a-truncate-ellipsis-5line';
+o_card_2.article_kicker.article_kicker_classes += ' lrv-a-font-basic-xs ';
+o_card_2.article_kicker_outer_classes = 'lrv-u-padding-b-075 lrv-u-padding-b-125@desktop-xl lrv-u-padding-t-1@desktop-xl';
+o_card_2.c_title.c_title_classes = 'lrv-u-padding-b-075@mobile-max lrv-a-font-primary-m lrv-u-padding-t-125@mobile-max';
+o_card_2.o_author.o_author_classes = 'lrv-a-font-body-xs lrv-u-text-transform-uppercase lrv-u-color-black';
+o_card_2.c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-1x1@tablet lrv-a-crop-3x2@desktop-xl lrv-a-crop-3x2@mobile-max';
+o_card_2.c_lazy_image.c_lazy_image_classes = 'lrv-u-width-100p';
+o_card_2.o_card_classes ='lrv-u-margin-l-00@desktop-xl lrv-u-flex-basis-100p lrv-u-flex-direction-column@desktop-xl lrv-a-space-children--1 lrv-a-space-children--0@desktop-xl lrv-u-border-t-1@mobile-max lrv-u-padding-t-2@mobile-max lrv-a-space-children-horizontal@tablet lrv-u-flex@tablet';
+o_card_2.o_card_content_classes = 'lrv-u-align-items-start lrv-u-flex lrv-u-flex-direction-column lrv-u-padding-b-150@mobile-max lrv-u-padding-t-1@mobile-max';
+
+const o_card_3 = clonedeep(o_card_prototype);
+
+o_card_3.article_kicker.article_kicker_text = 'YACHT ROCK';
+o_card_3.c_title.c_title_text = 'Welcome to Jenny Lewis’ Yacht-Rock Era. It’s Nice Here';
+o_card_3.c_dek.c_dek_text = '“Puppy and a Truck” is all about the unconditional love that only a dog and a vehicle can provide';
+o_card_3.c_dek.c_dek_classes = 'lrv-u-margin-tb-075@desktop-xl lrv-a-hidden@desktop-max lrv-a-hidden@desktop-xl-max lrv-a-font-body-l lrv-a-truncate-ellipsis-5line';
+o_card_3.article_kicker.article_kicker_classes += ' lrv-a-font-basic-xs ';
+o_card_3.article_kicker_outer_classes = 'lrv-u-padding-b-075 lrv-u-padding-b-125@desktop-xl lrv-u-padding-t-1@desktop-xl';
+o_card_3.c_title.c_title_classes = 'lrv-u-padding-b-075@mobile-max lrv-a-font-primary-m lrv-u-padding-t-125@mobile-max';
+o_card_3.o_author.o_author_classes = 'lrv-a-font-body-xs lrv-u-text-transform-uppercase lrv-u-color-black';
+o_card_3.c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-1x1@tablet lrv-a-crop-3x2@desktop-xl lrv-a-crop-3x2@mobile-max';
+o_card_3.c_lazy_image.c_lazy_image_classes = 'lrv-u-width-100p';
+o_card_3.o_card_classes = 'lrv-a-space-children--1 lrv-a-space-children--2@desktop-xl lrv-a-space-children-horizontal  lrv-u-flex-basis-100p lrv-u-border-t-0@desktop-xl lrv-u-border-t-1@tablet lrv-u-flex-direction-column@desktop-xl lrv-u-flex@tablet lrv-u-margin-t-00@desktop-xl lrv-u-margin-t-150@tablet lrv-u-padding-t-00@desktop-xl lrv-u-padding-t-150@tablet';
+o_card_3.o_card_content_classes = 'lrv-u-margin-l-00@mobile-max lrv-u-margin-l-00@desktop-xl lrv-u-align-items-start lrv-u-flex lrv-u-flex-direction-column lrv-u-padding-b-150@mobile-max lrv-u-padding-t-1@mobile-max';
+
+const o_card_4 = clonedeep(o_card_prototype);
+
+o_card_4.c_dek = false;
+o_card_4.c_lazy_image = false;
+o_card_4.article_kicker_outer_classes = ' lrv-u-color-brand-primary lrv-u-display-inline';
+o_card_4.article_kicker.article_kicker_classes = ' lrv-a-font-primary-m article-kicker lrv-u-display-inline';
+o_card_4.c_title.c_title_classes = 'lrv-a-font-primary-m lrv-u-display-inline';
+o_card_4.c_title.c_title_link_classes = 'lrv-a-unstyle-link lrv-u-color-brand-primary:hover';
+o_card_4.o_author.o_author_classes = ' lrv-u-display-inline lrv-a-font-primary-m lrv-u-color-grey-light';
+o_card_4.o_card_content_classes ='';
+o_card_4.o_card_classes = ' lrv-u-flex-basis-40p lrv-u-margin-r-2@tablet lrv-u-border-t-1@mobile-max lrv-u-padding-t-2@mobile-max lrv-u-margin-t-175@desktop-xl lrv-u-padding-t-175@desktop-xl lrv-u-border-t-1@desktop-xl lrv-u-margin-r-00@desktop-xl lrv-u-border-t-1@desktop-xl';
+o_card_4.c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-3x2';
+
+const o_card_5 = clonedeep(o_card_1);
+
+o_card_5.article_kicker.article_kicker_text = 'INSIDE LOOK';
+o_card_5.c_title.c_title_text = '40 Watt Sun Raise the Emotional Stakes While Turning Down the Volume on New Chamber-Folk Epic';
+o_card_5.o_card_classes = 'lrv-u-padding-r-2@tablet lrv-u-padding-b-150@mobile-max lrv-u-flex-basis-50p lrv-u-border-r-1@tablet ';
+o_card_5.article_kicker_outer_classes = ' lrv-a-glue-parent lrv-u-background-color-white lrv-u-padding-b-1 lrv-u-padding-r-1 lrv-u-padding-t-1';
+o_card_5.article_kicker.article_kicker_classes += 'lrv-a-font-basic-xs ';
+o_card_5.o_card_content_classes = ' lrv-u-align-items-start lrv-u-flex lrv-u-flex-basis-100p@desktop-xl-max lrv-u-flex-direction-column lrv-u-padding-l-150@mobile-max lrv-u-padding-r-150@mobile-max';
+o_card_5.c_title.c_title_classes = 'lrv-u-padding-t-00@desktop-xl lrv-u-padding-b-075 lrv-u-padding-t-00@mobile-max lrv-a-font-primary-xl lrv-u-padding-t-025';
+o_card_5.o_card_image_wrap_classes = 'lrv-u-flex-basis-100p@desktop-xl-max  ';
+
+const o_card_6 = clonedeep(o_card_prototype);
+
+o_card_6.article_kicker.article_kicker_text = 'EXCLUSIVE';
+o_card_6.c_title.c_title_text = 'Marilyn Manson: The Monster Hiding in Plain Sight';
+o_card_6.c_dek.c_dek_text = 'He was a provocative media darling for decades. Offstage, exes allege, he was an abuser who made their lives hell. A Rolling Stone investigation based on court documents and more than 55 new interviews';
+o_card_6.c_lazy_image = false;
+o_card_6.c_dek.c_dek_classes = 'lrv-a-font-body-l lrv-a-truncate-ellipsis-5line lrv-u-margin-b-1@desktop-xl lrv-u-margin-t-075@desktop-xl lrv-u-margin-tb-075@mobile-max';
+o_card_6.article_kicker.article_kicker_classes += ' lrv-a-font-basic-l';
+o_card_6.article_kicker_outer_classes = 'lrv-u-padding-b-125@desktop-xl';
+o_card_6.c_title.c_title_classes = 'lrv-u-padding-t-1 lrv-a-font-primary-l lrv-u-padding-t-00@desktop-xl';
+o_card_6.o_author.o_author_classes = 'lrv-a-font-body-xs lrv-u-text-transform-uppercase lrv-u-color-black';
+o_card_6.o_card_classes = 'lrv-u-padding-l-2@tablet lrv-u-padding-l-150@mobile-max lrv-u-padding-r-150@mobile-max lrv-u-flex-basis-50p';
+o_card_6.o_card_content_classes = 'lrv-u-align-items-start lrv-u-border-b-1@mobile-max lrv-u-border-t-1@mobile-max lrv-u-flex lrv-u-flex-direction-column lrv-u-margin-b-2@mobile-max lrv-u-padding-b-2@mobile-max lrv-u-padding-t-2@mobile-max';
+
+module.exports = {
+	stories: [o_card_1, o_card_2, o_card_3, o_card_4, o_card_5, o_card_6],
+	secondary_stories_classes:'',
+	stories_content_primary_classes:'lrv-u-border-t-6',
+	stories_content_primary_inner_classes:'lrv-u-padding-b-150@tablet lrv-u-padding-b-3@desktop-xl lrv-u-margin-b-250@mobile-max lrv-u-padding-t-150@mobile-max lrv-u-padding-t-150 lrv-u-border-t-2 lrv-u-flex lrv-u-margin-t-025 lrv-a-space-children--3@desktop-xl lrv-a-space-children-horizontal lrv-u-flex-direction-column lrv-u-flex-direction-row@desktop-xl lrv-u-padding-t-250@desktop-xl',
+	stories_card_primary_classes:' lrv-u-flex-basis-45p lrv-u-padding-b-150 lrv-u-padding-b-00@desktop-xl',
+	stories_card_secondary_classes:' lrv-u-flex lrv-u-padding-l-150@mobile-max lrv-u-padding-r-150@mobile-max lrv-u-border-t-1@tablet lrv-u-padding-t-00@mobile-max lrv-u-flex-direction-column@mobile-max lrv-u-flex-direction-row-reverse lrv-u-flex-basis-55p lrv-u-flex-direction-column@desktop-xl lrv-u-padding-t-150 lrv-u-padding-t-00@desktop-xl lrv-u-border-t-0@desktop-xl',
+	stories_card_secondary_inner_classes:'  lrv-u-flex-basis-60p lrv-u-padding-t-00@desktop-xl lrv-u-border-t-0@desktop-xl lrv-a-space-children--2@desktop-xl lrv-a-space-children-horizontal@desktop-xl lrv-u-flex lrv-u-flex-direction-column lrv-u-flex-direction-row@desktop-xl',
+	stories_content_secondary_classes:'lrv-u-border-t-6',
+	stories_content_secondary_inner_classes:' lrv-u-padding-t-150@tablet lrv-u-border-t-2 lrv-u-flex@tablet lrv-u-margin-t-025 lrv-u-padding-t-150@mobile-max lrv-u-padding-tb-250@desktop-xl',
+};

package/modules/secondary-stories/secondary-stories.twig

@@ -0,0 +1,22 @@
+<section class="secondary-stories {{ secondary_stories_classes }}">
+	<div class="stories-content-primary // {{ stories_content_primary_classes }} ">
+		<div class="stories-content-primary-inner // {{ stories_content_primary_inner_classes }} ">
+			<div class="stories-card-primary // {{ stories_card_primary_classes }}">
+				{% include "@larva/objects/o-card/o-card.twig" with stories[0] %} 
+			</div> 
+			<div class="stories-card-secondary // {{ stories_card_secondary_classes }} ">
+				<div class=" stories-card-secondary-inner // {{ stories_card_secondary_inner_classes }}">
+					{% include "@larva/objects/o-card/o-card.twig" with stories[1] %} 
+					{% include "@larva/objects/o-card/o-card.twig" with stories[2] %} 
+				</div> 
+				{% include "@larva/objects/o-card/o-card.twig" with stories[3] %} 
+			</div> 
+		</div> 
+	</div>
+	<div class="stories-content-secondary // {{ stories_content_secondary_classes }} "> 
+		<div class="stories-content-secondary-inner // {{ stories_content_secondary_inner_classes }} ">
+			{% include "@larva/objects/o-card/o-card.twig" with stories[4] %} 
+			{% include "@larva/objects/o-card/o-card.twig" with stories[5] %} 
+		</div>   
+	</div> 
+</section>

package/modules/separator/separator.prototype.js

@@ -0,0 +1,4 @@
+module.exports = {
+	separator_classes: 'lrv-u-border-a-1',
+	separator_border_color_class: ''
+};

package/modules/separator/separator.thick.js

@@ -0,0 +1,7 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const separator = clonedeep( require( './separator.prototype' ) );
+
+separator.separator_classes = 'lrv-u-border-a-3';
+
+module.exports = separator;

package/modules/separator/separator.twig

@@ -0,0 +1 @@
+<hr class="separator larva // {{ separator_classes }} {{ separator_border_color_class }}" />

package/modules/separator/separator.wide-thick.js

@@ -0,0 +1,7 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const separator = clonedeep( require( './separator.wide' ) );
+
+separator.separator_classes = 'lrv-u-margin-tb-1 lrv-u-border-a-3 lrv-u-margin-lr-2 lrv-u-margin-lr-4@desktop';
+
+module.exports = separator;

package/modules/separator/separator.wide.js

@@ -0,0 +1,7 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const separator = clonedeep( require( './separator.prototype' ) );
+
+separator.separator_classes = 'lrv-u-margin-tb-1 lrv-u-border-a-1 lrv-u-margin-lr-2 lrv-u-margin-lr-4@desktop';
+
+module.exports = separator;

package/modules/social-share/social-share.prototype.js

@@ -0,0 +1,43 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_icon = clonedeep( require( '../../components/c-icon/c-icon.prototype' ) );
+const social_share_primary_items = [ 'facebook', 'twitter', 'pinterest', 'tumblr', 'reddit', 'linkedin', 'print' ];
+
+const social_share_primary = [];
+const social_share_secondary = [];
+
+const c_icon_struct = clonedeep( c_icon );
+c_icon_struct.c_icon_link_classes = 'lrv-a-unstyle-link lrv-u-display-block lrv-u-display-inline-flex';
+c_icon_struct.c_icon_url = '#';
+c_icon_struct.c_icon_classes = 'lrv-u-width-16 lrv-u-height-16';
+
+for ( let i = 0; i < social_share_primary_items.length; i++ ) {
+	let c_icon_social = clonedeep( c_icon_struct );
+
+	c_icon_social.c_icon_rel_name = social_share_primary_items[i];
+	c_icon_social.c_icon_name = social_share_primary_items[i];
+
+	if ( 3 < i ) {
+		social_share_primary.push( c_icon_social );
+	} else {
+		social_share_secondary.push( c_icon_social );
+	}
+}
+
+const c_icon_plus = clonedeep( c_icon );
+c_icon_plus.c_icon_link_classes = 'lrv-a-unstyle-button lrv-u-cursor-pointer';
+c_icon_plus.c_icon_url = '';
+c_icon_plus.c_icon_rel_name = 'plus';
+c_icon_plus.c_icon_name = 'plus';
+c_icon_plus.c_icon_classes = 'lrv-u-width-16 lrv-u-height-16';
+
+module.exports = {
+	social_share_classes: '',
+	social_share_prefix: false,
+	social_share_prefix_classes: 'lrv-u-display-none@mobile-max lrv-u-color-grey lrv-u-font-size-10 lrv-u-text-transform-uppercase lrv-u-margin-r-1@tablet lrv-u-margin-b-050@mobile-max',
+	social_share_prefix_text: 'Share',
+	social_share_items_classes: 'lrv-a-space-children--1 lrv-a-space-children-horizontal',
+	social_share_primary: social_share_primary,
+	social_share_secondary: social_share_secondary,
+	c_icon_plus: c_icon_plus
+};

package/modules/social-share/social-share.twig

@@ -0,0 +1,30 @@
+<div class="social-share // lrv-u-align-items-center lrv-u-flex {{ social_share_classes }}">
+	{% if social_share_prefix %}
+		<span class="{{ social_share_prefix_classes }}">
+			{{ social_share_prefix_text }}
+		</span>
+	{% endif %}
+
+	<h2 id="article-social-share" class="lrv-a-screen-reader-only">Services to share this page.</h2>
+	<ul class="lrv-a-unstyle-list lrv-u-flex lrv-u-flex-wrap-wrap {{ social_share_items_classes }}" data-collapsible="collapsed" aria-labelledby="article-social-share">
+		{% for item in social_share_primary %}
+			<li class="{{ social_share_item_classes }}">
+				{% include "@larva/components/c-icon/c-icon.twig" with item %}
+			</li>
+		{% endfor %}
+
+		{% if social_share_secondary %}
+			<li data-collapsible-toggle>
+				<button  class="c-button {{ c_icon_plus['c_icon_link_classes'] }}" title="Show more sharing options" data-toggle>
+					{% include "@larva/components/c-icon/c-icon.twig" with c_icon_plus %}
+				</button>
+			</li>
+
+			{% for item in social_share_secondary %}
+				<li class="{{ social_share_item_classes }}" data-collapsible-panel>
+					{% include "@larva/components/c-icon/c-icon.twig" with item %}
+				</li>
+			{% endfor %}
+		{% endif %}
+	</ul>
+</div>