@penskemediacorp/larva-patterns 0.6.0 → 0.6.4

package/components/c-lazy-image/c-lazy-image.prototype.js

@@ -4,6 +4,7 @@ module.exports = {
 	c_lazy_image_link_classes: 'lrv-a-unstyle-link',
 	c_lazy_image_crop_class: 'lrv-a-crop-16x9',
 	c_lazy_image_crop_style_attr: false,
+	c_lazy_image_link_tab_index_attr: false,
 	c_lazy_image_alt_attr: 'Lazy loaded image',
 	c_lazy_image_src_url: 'https://farm5.staticflickr.com/4078/5441060528_31db7838ba_z.jpg',
 	c_lazy_image_placeholder_url: 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==',

package/components/c-lazy-image/c-lazy-image.twig

@@ -1,6 +1,10 @@
 <div class="c-lazy-image {{ modifier_class }} {{ c_lazy_image_classes }}">
 	{% if c_lazy_image_link_url %}
-		<a href="{{ c_lazy_image_link_url }}" class="c-lazy-image__link {{ c_lazy_image_link_classes }}">
+		<a href="{{ c_lazy_image_link_url }}" class="c-lazy-image__link {{ c_lazy_image_link_classes }}"
+			{% if c_lazy_image_link_tab_index_attr %}
+				tabindex="{{ c_lazy_image_link_tab_index_attr }}"
+			{% endif %}
+		>
 	{% endif %}
 
 	{% if c_lazy_image_crop_class %}

package/components/c-svg/c-svg.prototype.js

@@ -0,0 +1,4 @@
+module.exports = {
+	c_svg_classes: '',
+	c_svg_name: 'brand-logo'
+}

package/components/c-svg/c-svg.twig

@@ -0,0 +1,3 @@
+<div class="c-svg {{ c_svg_classes }}">
+	{% include '../../build/svg/' ~ c_svg_name ~ '.svg' %}
+</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/footer-button-list/footer-button-list.prototype.js

@@ -0,0 +1,43 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_button_prototype = require( '../../components/c-button/c-button.prototype.js' );
+const get_digital_access = clonedeep( c_button_prototype );
+const get_magazine = clonedeep( c_button_prototype );
+const get_gift = clonedeep( c_button_prototype );
+const customer_service = clonedeep( c_button_prototype );
+
+get_digital_access.c_button_type_attr = 'button';
+get_digital_access.c_button_inner_classes = 'lrv-u-display-inline-block lrv-u-border-color-grey lrv-u-border-color-white:hover lrv-u-padding-tb-050 lrv-u-padding-lr-025 lrv-u-width-100p lrv-u-border-a-1';
+get_digital_access.c_button_classes = 'lrv-u-text-align-center lrv-u-margin-b-1 lrv-u-padding-a-025 lrv-u-background-color-brand-primary:hover lrv-u-color-white:hover lrv-u-font-weight-bold lrv-a-font-body-xxs lrv-u-background-color-white lrv-u-color-black cx-dynamic-link';
+get_digital_access.c_button_screen_reader_text = 'Get Digital Access';
+get_digital_access.c_button_text = 'Get Digital Access';
+get_digital_access.c_button_url = '#get-digital-access';
+
+get_magazine.c_button_type_attr = 'button';
+get_magazine.c_button_inner_classes = 'lrv-u-display-inline-block lrv-u-border-color-grey lrv-u-border-color-white:hover lrv-u-padding-tb-050 lrv-u-padding-lr-025 lrv-u-width-100p lrv-u-border-a-1';
+get_magazine.c_button_classes = 'lrv-u-text-align-center lrv-u-margin-b-1 lrv-u-padding-a-025 lrv-u-background-color-brand-primary:hover lrv-u-color-white:hover lrv-u-font-weight-bold lrv-a-font-body-xxs lrv-u-background-color-white lrv-u-color-black';
+get_magazine.c_button_screen_reader_text = 'Get The Magazine';
+get_magazine.c_button_text = 'Get The Magazine';
+get_magazine.c_button_url = '#get-the-magazine';
+
+get_gift.c_button_type_attr = 'button';
+get_gift.c_button_inner_classes = 'lrv-u-display-inline-block lrv-u-border-color-grey lrv-u-border-color-white:hover lrv-u-padding-tb-050 lrv-u-padding-lr-025 lrv-u-width-100p lrv-u-border-a-1';
+get_gift.c_button_classes = 'lrv-u-text-align-center lrv-u-margin-b-1 lrv-u-padding-a-025 lrv-u-background-color-brand-primary:hover lrv-u-color-white:hover lrv-u-font-weight-bold lrv-a-font-body-xxs lrv-u-color-white lrv-u-border-a-1 lrv-u-border-color-grey lrv-u-border-color-brand-primary-dark:hover';
+get_gift.c_button_screen_reader_text = 'Get a Gift';
+get_gift.c_button_text = 'Get a Gift';
+get_gift.c_button_url = '#get-a-gift';
+
+customer_service.c_button_type_attr = 'button';
+customer_service.c_button_inner_classes = 'lrv-u-display-inline-block lrv-u-border-color-grey lrv-u-border-color-white:hover lrv-u-padding-tb-050 lrv-u-padding-lr-025 lrv-u-width-100p lrv-u-border-a-1';
+customer_service.c_button_classes = 'lrv-u-text-align-center lrv-u-margin-b-1 lrv-u-padding-a-025 lrv-u-background-color-brand-primary:hover lrv-u-color-white:hover lrv-u-font-weight-bold lrv-a-font-body-xxs lrv-u-color-white lrv-u-border-a-1 lrv-u-border-color-grey lrv-u-border-color-brand-primary-dark:hover';
+customer_service.c_button_screen_reader_text = 'Customer Service';
+customer_service.c_button_text = 'Customer Service';
+customer_service.c_button_url = '#customer-service';
+
+module.exports = {
+	footer_button_list_content_classes: 'o-footer-button-list__content a-font-body-s lrv-u-flex lrv-u-flex-direction-column a-double-underline a-double-underline-color-grey a-double-underline-bottom@mobile-max lrv-u-padding-b-2@mobile-max',
+	footer_button_list_title_classes: 'a-font-accent-medium-l lrv-u-font-weight-bold lrv-u-display-none@mobile-max lrv-u-padding-b-050',
+	footer_button_list_classes: 'lrv-u-text-transform-uppercase u-letter-spacing-0063',
+	footer_button_list_title_text: '',
+	footer_button_list_buttons: [ get_digital_access, get_magazine, get_gift, customer_service],
+};

package/modules/footer-button-list/footer-button-list.twig

@@ -0,0 +1,13 @@
+<div class="footer-button-list {{ footer_button_list_classes }}">
+	{% if footer_button_list_title_text %}
+		<h4 class="footer-button-list__title {{ footer_button_list_title_classes }}">
+			{{ footer_button_list_title_text }}
+		</h4>
+	{% endif %}
+
+	<section class="footer-button-list__content lrv-u-flex lrv-u-flex-direction-column {{ footer_button_list_content_classes }}">
+		{% for item in footer_button_list_buttons %}
+			{% include "@larva/components/c-button/c-button.twig" with item %}
+		{% endfor %}
+	</section>
+</div>

package/modules/footer-magazine-image/footer-magazine-image.prototype.js

@@ -0,0 +1,15 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_lazy_magazine_image_prototype = require( '../../components/c-lazy-image/c-lazy-image.prototype' );
+const c_lazy_magazine_image = clonedeep( c_lazy_magazine_image_prototype );
+
+c_lazy_magazine_image.c_lazy_image_classes = 'lrv-u-flex-shrink-0 lrv-u-margin-r-2 lrv-u-width-300 a-hidden@desktop-xl-max';
+c_lazy_magazine_image.c_lazy_image_src_url = 'https://cdn.shopify.com/s/files/1/0238/6647/products/2019_37_540x.jpg';
+c_lazy_magazine_image.c_lazy_image_placeholder_url = 'https://cdn.shopify.com/s/files/1/0238/6647/products/2019_37_540x.jpg';
+c_lazy_magazine_image.c_lazy_image_crop_class = '';
+c_lazy_magazine_image.c_lazy_image_link_url = '/subscribe-us/';
+c_lazy_magazine_image.c_lazy_image_srcset_attr = 'https://cdn.shopify.com/s/files/1/0238/6647/products/2019_37_540x.jpg 240w,https://cdn.shopify.com/s/files/1/0238/6647/products/2019_37_540x.jpg 320w,https://cdn.shopify.com/s/files/1/0238/6647/products/2019_37_540x.jpg 500w,https://cdn.shopify.com/s/files/1/0238/6647/products/2019_37_540x.jpg 640w,https://cdn.shopify.com/s/files/1/0238/6647/products/2019_37_540x.jpg 1024w';
+
+module.exports = {
+	c_lazy_magazine_image,
+};

package/modules/footer-magazine-image/footer-magazine-image.twig

@@ -0,0 +1,3 @@
+<div class="footer-image //">
+	{% include "@larva/components/c-lazy-image/c-lazy-image.twig" with c_lazy_magazine_image %}
+</div>

package/modules/injected-related-content/injected-related-content.prototype.js

@@ -11,7 +11,7 @@ const c_title = clonedeep(c_title_prototype);
 
 c_title.c_title_text = 'Chronixx Says Some Dancehall Lyrics Are ‘Embarrassing’, Artists Should Stop Calling Him For Features';
 c_title.c_title_classes = 'lrv-a-font-primary-xs lrv-u-color-black lrv-u-padding-t-125';
-c_title.c_title_link_classes = 'lrv-a-font-primary-xs lrv-u-color-black lrv-a-truncate-ellipsis-5line@desktop-xl-max lrv-a-truncate-ellipsis-3line@desktop-xl';
+c_title.c_title_link_classes = 'lrv-a-font-primary-xs lrv-u-color-black lrv-a-truncate-ellipsis-4line@mobile-max lrv-a-truncate-ellipsis-5line@tablet-desktop-only lrv-a-truncate-ellipsis-3line@desktop-xl';
 c_title.c_title_url = '#';
 
 const c_lazy_image_prototype = require('../../components/c-lazy-image/c-lazy-image.prototype.js');
@@ -31,6 +31,7 @@ o_card_first.c_title.c_title_url = '#';
 o_card_first.c_lazy_image = false;
 o_card_first.c_span = false;
 o_card_first.c_timestamp = false;
+o_card_first.o_card_tag_text = 'div';
 
 const o_card_last = clonedeep(o_card_prototype);
 
@@ -42,6 +43,7 @@ o_card_last.c_title.c_title_url = '#';
 o_card_last.c_lazy_image = false;
 o_card_last.c_span = false;
 o_card_last.c_timestamp = false;
+o_card_last.o_card_tag_text = 'div';
 
 module.exports = {
     injected_related_content_classes: 'lrv-u-border-t-1 lrv-u-padding-t-025',

package/modules/newswire/newswire.prototype.js

@@ -5,12 +5,14 @@ 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';
@@ -23,7 +25,7 @@ c_title.c_title_text = 'Lorem ipsum dolor, sit amet consectetur adipisicing elit
 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 lrv-u-height-100p lrv-u-color-brand-primary:hover';
+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 = '';
@@ -32,8 +34,12 @@ 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

@@ -1,14 +1,14 @@
-<section class="newswire // lrv-a-wrapper lrv-u-padding-b-2 lrv-u-margin-t-2">
+<section class="newswire // {{ newswire_classes }}">
 	{% if c_heading %}
 		{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
 	{% endif %}
-	<ul class="lrv-a-unstyle-list lrv-a-grid lrv-a-cols2 lrv-a-cols5@desktop lrv-a-grid-first-child-span-all@mobile-max"
+	<ul class="{{ newswire_list_classes }}"
 		{% if newswire_aria_labelledby_attr %}
 			aria-labelledby="{{ newswire_aria_labelledby_attr }}"
 		{% endif %}
 	>
 		{% for item in newswire_items %}
-			<li class="lrv-a-grid-item lrv-u-height-100p">
+			<li class="{{ newswire_list_item_classes }}">
 				{% include "@larva/objects/o-card/o-card.twig" with item %}
 			</li>
 		{% endfor %}

package/modules/story-grid/story-grid.river.js

@@ -3,9 +3,13 @@ const clonedeep = require( 'lodash.clonedeep' );
 
 const story_grid = __experimentalCloneWithFallback( 'modules/story-grid/story-grid.prototype' );
 const story_prototype = __experimentalCloneWithFallback( 'modules/story/story.prototype' );
+const c_span = __experimentalCloneWithFallback( 'components/c-span/c-span.prototype' );
 
 story_grid.story_grid_story_cards = story_grid.story_grid_story_cards.map( () => clonedeep( story_prototype ) );
 
 story_grid.story_grid_grid_classes = '';
 
+c_span.c_span_text = 'Read more'; 
+story_grid.c_span = c_span;
+
 module.exports = story_grid;

package/modules/story-grid/story-grid.twig

@@ -1,9 +1,12 @@
 <div class="story-grid lrv-u-padding-tb-1 lrv-u-padding-tb-2@desktop // {{ story_grid_classes }}">
-	<ul class="{{ story_grid_grid_classes }} // lrv-a-unstyle-list lrv-a-space-children-horizontal lrv-a-space-children--050 lrv-u-margin-b-050">
+	<ul class="{{ story_grid_grid_classes }} // lrv-a-unstyle-list lrv-u-margin-b-050">
 		{% for item in story_grid_story_cards %}
-			<li>
+			<li class="{{ story_grid_grid_item_classes }}">
 				{% include "@larva/modules/story/story.twig" with item %}
 			</li>
 		{% endfor %}
 	</ul>
+	{% if c_span %}
+		{% include "@larva/components/c-span/c-span.twig" with c_span %}
+	{% endif %}
 </div>

package/objects/o-card/o-card.prototype.js

@@ -14,6 +14,7 @@ module.exports = {
 	o_card_image_wrap_classes: '',
 	o_card_content_classes: '',
 	c_lazy_image: c_lazy_image,
+	c_svg: false,
 	c_span: c_span,
 	c_tagline: false,
 	c_title: c_title,

package/objects/o-card/o-card.twig

@@ -29,6 +29,10 @@
 			{% include "@larva/objects/o-span-group/o-span-group.twig" with o_span_group %}
 		{% endif %}
 
+		{% if c_svg %}
+			{% include "@larva/components/c-svg/c-svg.twig" with c_svg %}
+		{% endif %}
+
 		{% if c_span %}
 			{% include "@larva/components/c-span/c-span.twig" with c_span %}
 		{% endif %}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@penskemediacorp/larva-patterns",
-  "version": "0.6.0",
+  "version": "0.6.4",
   "description": "Larva markup patterns.",
   "author": "laras126 <laras126@gmail.com>",
   "homepage": "https://github.com/Penske-Media-Corp/pmc-larva/tree/master/packages/patterns#readme",
@@ -20,10 +20,10 @@
     "url": "https://github.com/Penske-Media-Corp/pmc-larva/issues"
   },
   "dependencies": {
-    "@penskemediacorp/larva-css": "^0.6.0",
+    "@penskemediacorp/larva-css": "^0.6.4",
     "@penskemediacorp/larva-js": "^0.6.0",
     "@penskemediacorp/larva-svg": "^0.6.0",
     "lodash.clonedeep": "^4.5.0"
   },
-  "gitHead": "a1bb1fceaf6aa39eb3a0f2730f11821f02dcca00"
+  "gitHead": "8bb6f5065f67b2284d187b5e6c6558ff57bc7ee5"
 }