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

package/modules/profile-browse-by/profile-browse-by.prototype.js

@@ -0,0 +1,29 @@
+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_classes += ' lrv-u-text-align-center lrv-u-font-family-secondary lrv-u-font-size-36 lrv-u-font-size-46@desktop-xl lrv-u-padding-b-2';
+c_heading.c_heading_text = 'Browse By Categories';
+
+o_card_list.o_card_list_classes += ' lrv-u-flex lrv-a-space-children-horizontal lrv-a-space-children--2 lrv-u-justify-content-space-evenly lrv-u-flex-wrap-wrap';
+
+o_card_list.o_card_list_item_classes += ' lrv-u-text-align-center lrv-u-margin-b-1';
+
+o_card_list.o_card_list_items.map( o_card => {
+	o_card.c_lazy_image.c_lazy_image_img_classes += ' lrv-u-border-radius-50p';
+	o_card.c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-1x1';
+
+	o_card.o_card_link_url = '#';
+	o_card.o_card_link_classes = 'lrv-a-unstyle-link';
+	o_card.c_title.c_title_classes += ' lrv-u-margin-t-1';
+	o_card.c_title.c_title_url = false;
+	o_card.c_span = false;
+	o_card.c_timestamp = false;
+});
+
+module.exports = {
+	profile_browse_by_classes: '',
+	c_heading: c_heading,
+	o_card_list: o_card_list,
+};

package/modules/profile-browse-by/profile-browse-by.twig

@@ -0,0 +1,6 @@
+<section class="profile-browse-by // {{ profile_browse_by_classes }}">
+	<div class="lrv-a-wrapper">
+		{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
+		{% include "@larva/objects/o-card-list/o-card-list.twig" with o_card_list %}
+	</div>
+</section>

package/modules/profile-card-list/profile-card-list.prototype.js

@@ -0,0 +1,25 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const profile_blurb_card = clonedeep( require( '../profile-blurb/profile-blurb.card' ) );
+
+module.exports = {
+	profile_card_list_classes: 'lrv-a-unstyle-list lrv-a-grid lrv-a-cols2 lrv-a-cols3@tablet',
+	profile_card_list: [
+		profile_blurb_card,
+		profile_blurb_card,
+		profile_blurb_card,
+		profile_blurb_card,
+		profile_blurb_card,
+		profile_blurb_card,
+		profile_blurb_card,
+		profile_blurb_card,
+		profile_blurb_card,
+		profile_blurb_card,
+		profile_blurb_card,
+		profile_blurb_card,
+		profile_blurb_card,
+		profile_blurb_card,
+		profile_blurb_card,
+		profile_blurb_card
+	]
+}

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/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>

package/modules/special-coverage/special-coverage.prototype.js

@@ -0,0 +1,47 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const story_card = clonedeep( require( '@penskemediacorp/larva-patterns/modules/story/story.vertical' ) );
+const c_heading    = clonedeep( require('@penskemediacorp/larva-patterns/components/c-heading/c-heading.prototype') );
+const c_lazy_image   = clonedeep( require( '@penskemediacorp/larva-patterns/components/c-lazy-image/c-lazy-image.prototype.js' ) );
+
+c_heading.c_heading_classes += ' a-font-theme-primary-s lrv-u-font-size-32@desktop lrv-u-font-size-28 lrv-u-line-height-small lrv-u-text-transform-uppercase lrv-u-line-height-small';
+
+heading_1 = clonedeep( c_heading );
+heading_2 = clonedeep( c_heading );
+
+heading_1.c_heading_text = 'Rolling Stone';
+heading_1.c_heading_classes += ' lrv-u-color-brand-primary';
+
+heading_2.c_heading_text = 'Reports';
+
+c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-5x1';
+
+story_card.story_classes += ' lrv-u-padding-lr-2@desktop-xl lrv-u-padding-lr-1@desktop lrv-u-padding-tb-125@mobile-max lrv-u-flex-basis-100p';  
+story_card.c_dek.c_dek_classes = 'lrv-a-font-body-s lrv-a-hidden@mobile-max lrv-u-margin-a-00';
+story_card.c_title.c_title_classes = 'lrv-a-font-primary-xs lrv-u-display-block lrv-u-margin-b-050 ';
+story_card.c_title.c_title_link_classes += ' lrv-a-truncate-ellipsis-5line';
+story_card.story_grid_secondary_classes = 'lrv-a-span2';
+story_card.story_links_classes += ' lrv-u-margin-tb-00@desktop lrv-u-margin-tb-00@mobile-max lrv-u-margin-t-1@desktop';
+story_card.story_nav_classes = 'lrv-a-font-secondary-m';
+story_card.story_grid_classes = 'lrv-u-flex lrv-u-flex-direction-column@desktop';
+story_card.story_grid_primary_classes = 'lrv-u-flex-basis-50p@mobile-max lrv-u-margin-r-1@mobile-max';
+story_card.story_grid_secondary_classes = 'lrv-u-flex-basis-50p@mobile-max';
+story_card.c_span = false;
+story_card.c_dek = false;
+story_card.c_tagline_author = false;
+story_card.c_timestamp = false;
+story_card.c_link_bottom = false;
+
+const special_coverage_items = [ story_card, story_card, story_card, story_card ];
+
+module.exports = {
+    special_coverage_wrapper_classes: 'lrv-u-flex lrv-u-flex-direction-column@mobile-max lrv-u-padding-lr-150@mobile-max',
+    special_coverage_banner_classes: 'lrv-u-margin-r-2@desktop lrv-u-padding-tb-1 lrv-u-padding-tb-2@desktop lrv-u-flex-basis-15p@desktop',
+    special_coverage_items_classes: ' lrv-u-flex lrv-a-children-border-horizontal@desktop lrv-a-children-border-vertical@mobile-max lrv-u-flex-direction-column@mobile-max lrv-u-flex-basis-85p@desktop',
+    special_coverage_heading_classes: 'lrv-u-padding-b-150@desktop lrv-u-padding-b-125@mobile-max lrv-u-border-b-1',
+    special_coverage_logo_classes: 'lrv-u-padding-t-150@desktop lrv-u-padding-t-125@mobile-max',
+    heading_1,
+    heading_2,
+    c_lazy_image,
+    special_coverage_items,
+}

package/modules/special-coverage/special-coverage.twig

@@ -0,0 +1,29 @@
+<div class="special-coverage {{ special_coverage_classes }}">
+	<div class="{{ special_coverage_wrapper_classes }}">
+		<div class="{{ special_coverage_banner_classes }}">
+			{% if special_coverage_heading_classes %}
+				<div class="special-coverage-heading {{ special_coverage_heading_classes }}">
+					{% if heading_1 %} 
+						{% include "@larva/components/c-heading/c-heading.twig" with heading_1 %}
+					{% endif %}	
+					{% if heading_2 %}
+						{% include "@larva/components/c-heading/c-heading.twig" with heading_2 %}
+					{% endif %}	
+				</div>
+			{% endif %}	
+			{% if c_lazy_image %}
+				<div class="special-coverage-logo {{ special_coverage_logo_classes }}">
+					{% include "@larva/components/c-lazy-image/c-lazy-image.twig" with c_lazy_image %}
+				</div>  
+			{% endif %}			     
+		</div>
+		<div class="{{ special_coverage_items_classes }}">
+			{% for item in special_coverage_items %}
+				{% include "@larva/modules/story/story.twig" with item %}
+			{% endfor %}
+		</div>
+	</div>
+	{% if c_span %}
+		{% include "@larva/components/c-span/c-span.twig" with c_span %}
+	{% endif %}	
+<div>

package/modules/story/story.borders.js

@@ -0,0 +1,8 @@
+const { __experimentalCloneWithFallback } = require( '@penskemediacorp/larva' );
+
+const story_borders = __experimentalCloneWithFallback( 'modules/story/story.prototype' );
+
+story_borders.story_grid_classes += ' lrv-u-border-a-1';
+story_borders.story_grid_secondary_classes += ' lrv-u-padding-r-2@desktop-xl lrv-u-padding-r-00 lrv-u-padding-r-1@desktop';
+
+module.exports = story_borders;