@penskemediacorp/larva-patterns 0.7.0 → 0.7.1

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

@@ -0,0 +1,9 @@
+module.exports = {
+	c_input_type_attr: 'text',
+	c_input_id_attr: 'inputExample',
+	c_input_label_class: 'lrv-a-screen-reader-only',
+	c_input_label_text: 'Input Example',
+	c_input_class: '',
+	c_input_name: 'input_example',
+	c_input_placeholder_attr: 'Enter text.',
+};

package/components/c-input/c-input.twig

@@ -0,0 +1,13 @@
+<label class="c-input" for="{{ id_attr }}">
+	<span class="{{ c_input_label_class }}">{{ c_input_label_text }}</span>
+	<input
+		type="{{ c_input_type_attr }}"
+		class="{{ c_input_class }}"
+		name="{{ c_input_name }}"
+		placeholder="{{ c_input_placeholder_attr }}"
+		aria-invalid="{{ c_input_aria_invalid_attr }}"
+		data-error="{{ c_input_error_attr }}"
+		size="{{ c_input_size_attr }}"
+		maxlength="{{ c_input_maxlength_attr }}"
+	/>
+</label>

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

@@ -2,7 +2,7 @@ const clonedeep = require('lodash.clonedeep');
 
 const c_svg = clonedeep(require('@penskemediacorp/larva-patterns/components/c-svg/c-svg.prototype'));
 const c_heading = clonedeep(require('@penskemediacorp/larva-patterns/components/c-heading/c-heading.prototype'));
-const o_text_input_group = clonedeep(require('@penskemediacorp/larva-patterns/objects/o-text-input-group/o-text-input-group.prototype'));
+const o_input_group = clonedeep(require('@penskemediacorp/larva-patterns/objects/o-input-group/o-input-group.prototype'));
 const c_button = clonedeep(require('@penskemediacorp/larva-patterns/components/c-button/c-button.prototype'));
 const c_dek = clonedeep(require('@penskemediacorp/larva-patterns/components/c-dek/c-dek.prototype'));
 
@@ -12,24 +12,24 @@ c_svg.c_svg_classes = 'lrv-u-width-150 lrv-u-margin-lr-auto lrv-u-margin-b-2';
 c_heading.c_heading_classes += ' lrv-u-margin-b-2';
 c_heading.c_heading_text = 'You must be 21 to enter.';
 
-o_text_input_group.o_text_input_group_classes = 'lrv-u-margin-b-2';
-o_text_input_item = clonedeep( o_text_input_group.o_text_input_group_items[0] );
-o_text_input_item.c_text_input_classes = 'lrv-u-font-size-32 lrv-u-color-white lrv-u-background-color-grey-darkest lrv-u-padding-lr-050 lrv-u-padding-tb-150 lrv-u-width-100 lrv-u-text-align-center';
-o_text_input_item.c_text_input_size = 2;
-o_text_input_item.c_text_input_maxlength = 4;
+o_input_group.o_input_group_class = 'lrv-u-margin-b-2';
+o_input_group_item = clonedeep( o_input_group.o_input_group_items[0] );
+o_input_group_item.c_input_class = 'lrv-u-font-size-32 lrv-u-color-white lrv-u-background-color-grey-darkest lrv-u-padding-lr-050 lrv-u-padding-tb-150 lrv-u-width-100 lrv-u-text-align-center';
+o_input_group_item.c_input_size_attr = 2;
+o_input_group_item.c_input_maxlength_attr = 4;
 
-o_text_input_day = clonedeep( o_text_input_item );
-o_text_input_month = clonedeep( o_text_input_item );
-o_text_input_year = clonedeep( o_text_input_item );
+o_input_day_item = clonedeep( o_input_group_item );
+o_input_month_item = clonedeep( o_input_group_item );
+o_input_year_item = clonedeep( o_input_group_item );
 
-o_text_input_day.c_text_input_placeholder = 'DD';
-o_text_input_month.c_text_input_placeholder = 'MM';
-o_text_input_year.c_text_input_placeholder = 'YYYY';
+o_input_day_item.c_input_placeholder_attr = 'DD';
+o_input_month_item.c_input_placeholder_attr = 'MM';
+o_input_year_item.c_input_placeholder_attr = 'YYYY';
 
-o_text_input_group.o_text_input_group_items = [
-	o_text_input_day,
-	o_text_input_month,
-	o_text_input_year
+o_input_group.o_input_group_items = [
+	o_input_day_item,
+	o_input_month_item,
+	o_input_year_item
 ];
 
 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-u-font-size-32 lrv-u-font-size-18@mobile-max';
@@ -37,15 +37,15 @@ c_button.c_button_classes = ' lrv-u-color-white lrv-u-background-color-brand-pri
 c_dek.c_dek_text = 'Legal text.'
 
 module.exports = {
-	age_gate_classes: '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_classes: 'lrv-u-max-width-1000 lrv-u-margin-lr-auto',
-	age_gate_form_classes: 'lrv-u-border-b-1',
-	age_gate_error_classes: '',
-	form_wrapper_classes: '',
-	age_gate_footer_classes: 'lrv-u-border-t-1 lrv-u-margin-t-025',
+	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: '',
+	form_wrapper_class: '',
+	age_gate_footer_class: 'lrv-u-border-t-1 lrv-u-margin-t-025',
 	c_heading,
 	c_svg,
-	o_text_input_group,
+	o_input_group,
 	c_button,
 	c_dek
 };

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

@@ -1,23 +1,23 @@
-<div class="age-gate // js-AgeGate {{ age_gate_classes }}">
-	<div class="age-gate-inner // {{ age_gate_inner_classes }}">
-		<div class="age-gate-header // {{ age_gate_header_classes }}">
+<div class="age-gate // js-AgeGate {{ age_gate_class }}">
+	<div class="age-gate-inner // {{ age_gate_inner_class }}">
+		<div class="age-gate-header // {{ age_gate_header_class }}">
 			{% include "@larva/components/c-svg/c-svg.twig" with c_svg %}
 			{% if c_heading %}
 				{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
 			{% endif %}
 		</div>
-		<div class="age-gate-form // {{ age_gate_form_classes }}">
+		<div class="age-gate-form // {{ age_gate_form_class }}">
 			<form class="js-AgeGateForm">
-				{% if o_text_input_group %}
-					{% include "@larva/objects/o-text-input-group/o-text-input-group.twig" with o_text_input_group %}
+				{% 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_classes }}"></div>
+				<div class="age-gate-error // {{ age_gate_error_class }}"></div>
 				<div class="age-gate-button-wrapper">
 					{% include "@larva/components/c-button/c-button.twig" with c_button %}
 				</div>
 			</form>
 		</div>
-		<div class="age-gate-footer // {{ age_gate_footer_classes }}">
+		<div class="age-gate-footer // {{ age_gate_footer_class }}">
 			{% if c_dek %}
 				{% include "@larva/components/c-dek/c-dek.twig" with c_dek %}
 			{% endif %}

package/objects/o-input-group/o-input-group.prototype.js

@@ -0,0 +1,14 @@
+ /**
+ * Properties intentionally not prefixed with module name to avoid twig-to-php parser issues.
+ */
+const clonedeep = require( 'lodash.clonedeep' );
+const c_input = clonedeep(require('@penskemediacorp/larva-patterns/components/c-input/c-input.prototype'));
+
+module.exports = {
+	o_input_group_class: '',
+	o_input_group_items: [
+		c_input,
+		c_input,
+		c_input
+	]
+};

package/objects/o-input-group/o-input-group.twig

@@ -0,0 +1,6 @@
+{# Properties intentionally not prefixed with module name to avoid twig-to-php parser issues. #}
+<div class="o-input-group {{ o_input_group_class }}">
+	{% for item in o_input_group_items %}
+		{% include "@larva/components/c-input/c-input.twig" with item %}
+	{% endfor %}
+</div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@penskemediacorp/larva-patterns",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "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.0",
+    "@penskemediacorp/larva-css": "^0.7.1",
     "@penskemediacorp/larva-js": "^0.7.0",
     "@penskemediacorp/larva-svg": "^0.7.0",
     "lodash.clonedeep": "^4.5.0"
   },
-  "gitHead": "4f647cfb574dcae8905f806957c7dfa75420dbbe"
+  "gitHead": "c67261fe638b9c40d03875515249d147221d0a08"
 }

package/components/c-text-input/c-text-input.prototype.js

@@ -1,8 +0,0 @@
-module.exports = {
-	c_text_input_id: 'inputExample',
-	c_text_input_label_classes: 'lrv-a-screen-reader-only',
-	c_text_input_label_text: 'Input Example',
-	c_text_input_classes: '',
-	c_text_input_name: 'input_example',
-	c_text_input_placeholder: 'Enter text.',
-};

package/components/c-text-input/c-text-input.twig

@@ -1,13 +0,0 @@
-<label class="c-text-input" for="{{ c_text_input_id }}">
-	<span class="{{ c_text_input_label_classes }}">{{ c_text_input_label_text }}</span>
-	<input
-		type="text"
-		class="{{ c_text_input_classes }}"
-		name="{{ c_text_input_name }}"
-		placeholder="{{ c_text_input_placeholder }}"
-		aria-invalid="{{ c_text_input_aria_invalid }}"
-		data-error="{{ c_text_input_error }}"
-		size="{{ c_text_input_size }}"
-		maxlength="{{ c_text_input_maxlength }}"
-	/>
-</label>

package/objects/o-text-input-group/o-text-input-group.prototype.js

@@ -1,11 +0,0 @@
-const clonedeep = require( 'lodash.clonedeep' );
-const c_text_input = clonedeep(require('@penskemediacorp/larva-patterns/components/c-text-input/c-text-input.prototype'));
-
-module.exports = {
-	o_text_input_group_classes: '',
-	o_text_input_group_items: [
-		c_text_input,
-		c_text_input,
-		c_text_input
-	]
-};

package/objects/o-text-input-group/o-text-input-group.twig

@@ -1,5 +0,0 @@
-<div class="o-input-text-group {{ o_text_input_group_classes }}">
-	{% for item in o_text_input_group_items %}
-		{% include "@larva/components/c-text-input/c-text-input.twig" with item %}
-	{% endfor %}
-</div>