@penskemediacorp/larva-patterns 0.7.4 → 0.7.5

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

@@ -12,5 +12,6 @@ module.exports = {
 	c_lazy_image_sizes_attr: 'auto',
 	c_lazy_image_img_classes: 'lrv-u-background-color-grey-lightest lrv-u-width-100p lrv-u-display-block lrv-u-height-auto',
 	c_lazy_image_height_attr: '',
-	c_lazy_image_width_attr: ''
-}
+	c_lazy_image_width_attr: '',
+	c_lazy_image_in_initial_viewport: false
+}

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

@@ -14,7 +14,11 @@
 	{% if c_lazy_image_markup %}
 		{{ c_lazy_image_markup }}
 	{% else %}
-		<img class="c-lazy-image__img {{ c_lazy_image_img_classes }}" src="{{ c_lazy_image_placeholder_url }}" data-lazy-src="{{ c_lazy_image_src_url }}" alt="{{ c_lazy_image_alt_attr }}" data-lazy-srcset="{{ c_lazy_image_srcset_attr }}" data-lazy-sizes="{{ c_lazy_image_sizes_attr }}" height="{{ c_lazy_image_height_attr }}" width="{{ c_lazy_image_width_attr }}">
+		{% if c_lazy_image_in_initial_viewport %}
+			<img class="c-lazy-image__img {{ c_lazy_image_img_classes }}" src="{{ c_lazy_image_src_url }}" alt="{{ c_lazy_image_alt_attr }}" srcset="{{ c_lazy_image_srcset_attr }}" sizes="{{ c_lazy_image_sizes_attr }}" height="{{ c_lazy_image_height_attr }}" width="{{ c_lazy_image_width_attr }}">
+		{% else %}
+			<img class="c-lazy-image__img {{ c_lazy_image_img_classes }}" src="{{ c_lazy_image_placeholder_url }}" data-lazy-src="{{ c_lazy_image_src_url }}" alt="{{ c_lazy_image_alt_attr }}" data-lazy-srcset="{{ c_lazy_image_srcset_attr }}" data-lazy-sizes="{{ c_lazy_image_sizes_attr }}" height="{{ c_lazy_image_height_attr }}" width="{{ c_lazy_image_width_attr }}">
+		{% endif %}
 	{% endif %}
 
 	{% if c_lazy_image_crop_class %}

package/modules/banner/banner.prototype.js

@@ -0,0 +1,10 @@
+const clonedeep = require('lodash.clonedeep');
+
+const c_lazy_image_prototype = require('../../components/c-lazy-image/c-lazy-image.prototype');
+const c_lazy_image = clonedeep(c_lazy_image_prototype);
+
+module.exports = {
+	banner_classes: '',
+	c_lazy_image,
+	screen_reader_text: 'Page Banner',
+};

package/modules/banner/banner.twig

@@ -0,0 +1,10 @@
+<div class="banner // {{ banner_classes }}">
+	<div class="banner__img">
+	{% if c_lazy_image %}
+		{% include "@larva/components/c-lazy-image/c-lazy-image.twig" with c_lazy_image %}
+	{% endif %}
+	</div>
+	{% if screen_reader_text %}
+		<h1 class="lrv-a-screen-reader-only">{{ screen_reader_text }}</h1>
+	{% endif %}
+</div>

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

@@ -1,4 +1,9 @@
 <div class="story-grid lrv-u-padding-tb-1 lrv-u-padding-tb-2@desktop // {{ story_grid_classes }}">
+
+	{% if o_header %}
+		{% include "@larva/objects/o-header/o-header.twig" with o_header %}
+	{% endif %}
+
 	<ul class="{{ story_grid_grid_classes }} // lrv-a-unstyle-list lrv-u-margin-b-050">
 		{% for item in story_grid_story_cards %}
 			<li class="{{ story_grid_grid_item_classes }}">

package/objects/o-header/o-header.twig

@@ -11,6 +11,10 @@
 		{% include "@larva/components/c-button/c-button.twig" with c_button %}
 	{% endif %}
 
+	{% if c_svg %}
+		{% include "@larva/components/c-svg/c-svg.twig" with c_svg %}
+	{% endif %}
+
 	{% if o_sponsored_by %}
 		{% include "@larva/objects/o-sponsored-by/o-sponsored-by.twig" with o_sponsored_by %}
 	{% endif %}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@penskemediacorp/larva-patterns",
-  "version": "0.7.4",
+  "version": "0.7.5",
   "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.7.4",
-    "@penskemediacorp/larva-js": "^0.7.4",
+    "@penskemediacorp/larva-css": "^0.7.5",
+    "@penskemediacorp/larva-js": "^0.7.5",
     "@penskemediacorp/larva-svg": "^0.7.0",
     "lodash.clonedeep": "^4.5.0"
   },
-  "gitHead": "87d72c42360db2e0d2aeac4eda0b5dfdd5734b35"
+  "gitHead": "d584b033ef39d9be9279eab5b499528b5ab130e7"
 }