@penskemediacorp/larva-patterns 1.1.2 → 1.2.0

package/modules/age-gate/README.md

@@ -1,3 +1,3 @@
 # age-gate
 
-This module is relied heavily upon in the `pmc-age-gate` plugin and contains `js-` classes in the twig file that are important to its functionality.
+This module is relied heavily upon in the `pmc-age-gate` plugin and contains `js-` classes in the twig file that are important to its functionality. Custom JS and CSS (to handle pop-up modal in which the age gate module will appear) are handled in the aforementioned plugin.

package/modules/age-gate/age-gate.prototype.js

@@ -48,7 +48,7 @@ o_input_group.o_input_group_items = [
 ];
 
 c_button.c_button_text = 'View';
-c_button.c_button_classes = ' lrv-u-color-white lrv-u-background-color-brand-primary lrv-u-padding-lr-2 lrv-u-padding-tb-075 lrv-u-margin-b-2 lrv-u-text-align-center lrv-u-text-transform-uppercase lrv-a-font-primary-m';
+c_button.c_button_classes = ' lrv-u-margin-t-2 lrv-u-color-white lrv-u-background-color-brand-primary lrv-u-padding-lr-2 lrv-u-padding-tb-075 lrv-u-margin-b-2 lrv-u-text-align-center lrv-u-text-transform-uppercase lrv-a-font-primary-m';
 
 c_dek.c_dek_classes = 'lrv-a-font-primary-xs';
 c_dek.c_dek_text = 'Legal text.'
@@ -57,7 +57,7 @@ module.exports = {
 	age_gate_class: 'lrv-u-height-100p lrv-u-padding-t-2 lrv-u-background-color-black lrv-u-text-align-center lrv-u-color-white',
 	age_gate_inner_class: 'lrv-u-max-width-1000 lrv-u-margin-lr-auto',
 	age_gate_form_class: 'lrv-u-border-b-1',
-	age_gate_error_class: '',
+	age_gate_error_class: 'lrv-a-font-primary-s',
 	form_wrapper_class: '',
 	age_gate_footer_class: 'lrv-u-border-t-1 lrv-u-margin-t-025',
 	c_heading,

package/modules/age-gate/age-gate.twig

@@ -16,7 +16,7 @@
 				{% if o_input_group %}
 					{% include "@larva/objects/o-input-group/o-input-group.twig" with o_input_group %}
 				{% endif %}
-				<div class="age-gate-error // {{ age_gate_error_class }}"></div>
+				<div class="age-gate-error // js-AgeGateError {{ age_gate_error_class }}"></div>
 				<div class="age-gate-button-wrapper">
 					{% include "@larva/components/c-button/c-button.twig" with c_button %}
 				</div>

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.2.0",
   "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.2.0",
     "@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": "65f0eb85b8371be9b4471000cfcda33fd7c578ef"
 }