@penskemediacorp/larva-patterns 1.1.2 → 1.1.3

package/modules/buy-now/buy-now.prototype.js

@@ -0,0 +1,36 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+// Image
+const c_lazy_image_prototype = require( '@penskemediacorp/larva-patterns/components/c-lazy-image/c-lazy-image.prototype' );
+
+const c_lazy_image = clonedeep( c_lazy_image_prototype );
+
+c_lazy_image.c_lazy_image_srcset_attr = false;
+c_lazy_image.c_lazy_image_sizes_attr = false;
+c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-1x1';
+
+// Icon Button
+const c_icon_button = clonedeep( require( '../../objects/o-icon-button/o-icon-button.prototype' ) );
+
+c_icon_button.o_icon_button_url = true;
+c_icon_button.o_button_url = '#';
+c_icon_button.o_icon_button_classes += ' lrv-a-buy-now__button lrv-u-font-size-14 lrv-u-font-weight-bold lrv-u-text-transform-uppercase lrv-u-border-t-3 lrv-u-border-r-1 lrv-u-border-b-3 lrv-u-border-l-1 lrv-u-padding-tb-050 lrv-u-padding-lr-1 lrv-u-background-color-white lrv-u-color-black lrv-u-border-color-currentColor';
+c_icon_button.o_icon_button_target_attr = '_blank';
+c_icon_button.o_icon_button_rel_attr = 'nofollow';
+
+c_icon_button.c_icon.c_icon_name = 'triangle-right';
+c_icon_button.c_icon.c_icon_screen_reader_text = '';
+c_icon_button.c_span.c_span_text = 'Buy Now';
+
+// Export
+module.exports = {
+	buy_now_div_classes: 'lrv-a-buy-now lrv-u-font-family-basic',
+	buy_now_hr_top_classes: 'lrv-a-buy-now__hr lrv-a-buy-now__hr--top',
+	buy_now_img_classes: 'lrv-a-buy-now__image',
+	buy_now_hr_bottom_classes: 'lrv-a-buy-now__hr lrv-a-buy-now__hr--bottom',
+	buy_now_p_classes: 'lrv-a-buy-now__p lrv-u-font-family-basic lrv-u-font-size-14',
+	buy_now_span_classes: 'lrv-a-buy-now__span lrv-u-font-weight-bold lrv-u-text-transform-uppercase lrv-u-color-grey lrv-u-font-size-10',
+	buy_now_store_credit_text: '', // 'Amazon' for example
+	c_lazy_image,
+	c_icon_button,
+};

package/modules/buy-now/buy-now.twig

@@ -0,0 +1,23 @@
+{% if c_lazy_image %}
+	<div class="{{ buy_now_div_classes }}">
+		<hr class="{{ buy_now_hr_top_classes }}">
+
+		<div class="{{ buy_now_img_classes }}">
+			{% include "@larva/components/c-lazy-image/c-lazy-image.twig" with c_lazy_image %}
+		</div>
+
+		{% include "@larva/objects/o-icon-button/o-icon-button.twig" with c_icon_button %}
+
+		<hr class="{{ buy_now_hr_bottom_classes }}">
+
+		{% if buy_now_store_credit_text %}
+			<span class="{{ buy_now_span_classes }}">
+				{{ buy_now_store_credit_text }}
+			</span>
+		{% endif %}
+	</div>
+{% else %}
+	<p class="{{ buy_now_p_classes }}">
+		{% include "@larva/objects/o-icon-button/o-icon-button.twig" with c_icon_button %}
+	</p>
+{% endif %}

package/objects/o-icon-button/o-icon-button.prototype.js

@@ -12,7 +12,10 @@ c_span.c_span_url = false;
 
 module.exports = {
 	o_icon_button_classes: 'lrv-a-unstyle-button lrv-a-unstyle-link lrv-u-cursor-pointer lrv-u-flex',
+	o_icon_button_ga_tracking: {}, // by default we do not want to enable any ga tracking
+	o_icon_button_rel_attr: '',
 	o_icon_button_screen_reader_text: '',
+	o_icon_button_target_attr: '',
 	c_icon: c_icon,
 	c_span: c_span,
 };

package/objects/o-icon-button/o-icon-button.twig

@@ -1,5 +1,5 @@
 {% if o_icon_button_url %}
-	<a href="{{ o_button_url }}" class="{{ o_icon_button_classes }}">
+	<a href="{{ o_button_url }}" class="{{ o_icon_button_classes }}" target="{{ o_icon_button_target_attr }}" rel="{{ o_icon_button_rel_attr }}" data-pmc-sp-product="{{ o_icon_button_guid_attr }}" data-category-name="{{ o_icon_button_category_attr }}" {{ wp_action( 'pmc_do_render_custom_ga_tracking_attr', o_icon_button_ga_tracking ) }}>
 {% else %}
 	<button class="o-icon-button {{ o_icon_button_classes }}">
 {% endif %}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@penskemediacorp/larva-patterns",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "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": "^1.1.2",
+    "@penskemediacorp/larva-css": "^1.1.3",
     "@penskemediacorp/larva-js": "^1.0.0",
-    "@penskemediacorp/larva-svg": "^1.0.0",
+    "@penskemediacorp/larva-svg": "^1.1.3",
     "lodash.clonedeep": "^4.5.0"
   },
-  "gitHead": "226d634b90913073b4b5734415acd3594570c79d"
+  "gitHead": "0257235338f33438f86541cf6aa08ebf1176d139"
 }