@penskemediacorp/larva-patterns 0.7.2 → 0.7.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/components/c-input/c-input.prototype.js +0 -1
  2. package/components/c-input/c-input.twig +3 -2
  3. package/modules/age-gate/age-gate.prototype.js +26 -9
  4. package/modules/age-gate/age-gate.twig +12 -1
  5. package/package.json +3 -3
package/components/c-input/c-input.prototype.js CHANGED
@@ -4,6 +4,5 @@ module.exports = {
4
4
  c_input_label_class: 'lrv-a-screen-reader-only',
5
5
  c_input_label_text: 'Input Example',
6
6
  c_input_class: '',
7
- c_input_name: 'input_example',
8
7
  c_input_placeholder_attr: 'Enter text.',
9
8
  };
package/components/c-input/c-input.twig CHANGED
@@ -1,9 +1,10 @@
1
- <label class="c-input" for="{{ id_attr }}">
1
+ <label class="c-input" for="{{ c_input_id_attr }}">
2
2
  <span class="{{ c_input_label_class }}">{{ c_input_label_text }}</span>
3
3
  <input
4
+ id="{{ c_input_id_attr }}"
4
5
  type="{{ c_input_type_attr }}"
5
6
  class="{{ c_input_class }}"
6
- name="{{ c_input_name }}"
7
+ name="{{ c_input_id_attr }}"
7
8
  placeholder="{{ c_input_placeholder_attr }}"
8
9
  aria-invalid="{{ c_input_aria_invalid_attr }}"
9
10
  data-error="{{ c_input_error_attr }}"
package/modules/age-gate/age-gate.prototype.js CHANGED
@@ -1,20 +1,21 @@
1
1
  const clonedeep = require('lodash.clonedeep');
2
2
 
3
- const c_svg = clonedeep(require('@penskemediacorp/larva-patterns/components/c-svg/c-svg.prototype'));
3
+ const c_svg_prototype = require('@penskemediacorp/larva-patterns/components/c-svg/c-svg.prototype');
4
4
  const c_heading = clonedeep(require('@penskemediacorp/larva-patterns/components/c-heading/c-heading.prototype'));
5
5
  const o_input_group = clonedeep(require('@penskemediacorp/larva-patterns/objects/o-input-group/o-input-group.prototype'));
6
6
  const c_button = clonedeep(require('@penskemediacorp/larva-patterns/components/c-button/c-button.prototype'));
7
7
  const c_dek = clonedeep(require('@penskemediacorp/larva-patterns/components/c-dek/c-dek.prototype'));
8
8
 
9
- c_svg.c_svg_name = 'brand-logo-white';
10
- c_svg.c_svg_classes = 'lrv-u-width-150 lrv-u-margin-lr-auto lrv-u-margin-b-2';
9
+ const c_svg_header = clonedeep(c_svg_prototype);
10
+ c_svg_header.c_svg_name = 'brand-logo-white';
11
+ c_svg_header.c_svg_classes = 'lrv-u-width-150 lrv-u-margin-lr-auto lrv-u-margin-b-2';
11
12
 
12
- c_heading.c_heading_classes += ' lrv-u-margin-b-2';
13
+ c_heading.c_heading_classes += ' lrv-a-font-primary-l lrv-u-margin-b-2';
13
14
  c_heading.c_heading_text = 'You must be 21 to enter.';
14
15
 
15
16
  o_input_group.o_input_group_class = 'lrv-u-margin-b-2';
16
17
  o_input_group_item = clonedeep( o_input_group.o_input_group_items[0] );
17
- 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';
18
+ o_input_group_item.c_input_class = 'lrv-a-font-primary-m 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';
18
19
  o_input_group_item.c_input_size_attr = 2;
19
20
  o_input_group_item.c_input_maxlength_attr = 4;
20
21
 
@@ -22,18 +23,34 @@ o_input_day_item = clonedeep( o_input_group_item );
22
23
  o_input_month_item = clonedeep( o_input_group_item );
23
24
  o_input_year_item = clonedeep( o_input_group_item );
24
25
 
25
- o_input_day_item.c_input_placeholder_attr = 'DD';
26
26
  o_input_month_item.c_input_placeholder_attr = 'MM';
27
+ o_input_month_item.c_input_id_attr = 'pmc-age-gate-month';
28
+ o_input_month_item.c_input_error_attr = 'Please enter a valid month';
29
+ o_input_month_item.c_input_size_attr = 4;
30
+ o_input_month_item.c_input_maxlength_attr = 2;
31
+
32
+ o_input_day_item.c_input_placeholder_attr = 'DD';
33
+ o_input_day_item.c_input_id_attr = 'pmc-age-gate-day';
34
+ o_input_day_item.c_input_error_attr = 'Please enter a valid day';
35
+ o_input_day_item.c_input_size_attr = 4;
36
+ o_input_day_item.c_input_maxlength_attr = 2;
37
+
27
38
  o_input_year_item.c_input_placeholder_attr = 'YYYY';
39
+ o_input_year_item.c_input_id_attr = 'pmc-age-gate-year';
40
+ o_input_year_item.c_input_error_attr = 'Please enter a valid year';
41
+ o_input_year_item.c_input_size_attr = 4;
42
+ o_input_year_item.c_input_maxlength_attr = 4;
28
43
 
29
44
  o_input_group.o_input_group_items = [
30
- o_input_day_item,
31
45
  o_input_month_item,
46
+ o_input_day_item,
32
47
  o_input_year_item
33
48
  ];
34
49
 
35
- 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';
50
+ c_button.c_button_text = 'View';
51
+ 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';
36
52
 
53
+ c_dek.c_dek_classes = 'lrv-a-font-primary-xs';
37
54
  c_dek.c_dek_text = 'Legal text.'
38
55
 
39
56
  module.exports = {
@@ -44,7 +61,7 @@ module.exports = {
44
61
  form_wrapper_class: '',
45
62
  age_gate_footer_class: 'lrv-u-border-t-1 lrv-u-margin-t-025',
46
63
  c_heading,
47
- c_svg,
64
+ c_svg_header,
48
65
  o_input_group,
49
66
  c_button,
50
67
  c_dek
package/modules/age-gate/age-gate.twig CHANGED
@@ -1,7 +1,12 @@
1
1
  <div class="age-gate // js-AgeGate {{ age_gate_class }}">
2
2
  <div class="age-gate-inner // {{ age_gate_inner_class }}">
3
3
  <div class="age-gate-header // {{ age_gate_header_class }}">
4
- {% include "@larva/components/c-svg/c-svg.twig" with c_svg %}
4
+ {% if c_svg_header %}
5
+ {% include "@larva/components/c-svg/c-svg.twig" with c_svg_header %}
6
+ {% endif %}
7
+ {% if c_lazy_image_header %}
8
+ {% include "@larva/components/c-lazy-image/c-lazy-image.twig" with c_lazy_image_header %}
9
+ {% endif %}
5
10
  {% if c_heading %}
6
11
  {% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
7
12
  {% endif %}
@@ -21,6 +26,12 @@
21
26
  {% if c_dek %}
22
27
  {% include "@larva/components/c-dek/c-dek.twig" with c_dek %}
23
28
  {% endif %}
29
+ {% if c_svg_footer %}
30
+ {% include "@larva/components/c-svg/c-svg.twig" with c_svg_footer %}
31
+ {% endif %}
32
+ {% if c_lazy_image_footer %}
33
+ {% include "@larva/components/c-lazy-image/c-lazy-image.twig" with c_lazy_image_footer %}
34
+ {% endif %}
24
35
  </div>
25
36
  </div>
26
37
  </div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@penskemediacorp/larva-patterns",
3
- "version": "0.7.2",
3
+ "version": "0.7.3",
4
4
  "description": "Larva markup patterns.",
5
5
  "author": "laras126 <laras126@gmail.com>",
6
6
  "homepage": "https://github.com/Penske-Media-Corp/pmc-larva/tree/master/packages/patterns#readme",
@@ -20,10 +20,10 @@
20
20
  "url": "https://github.com/Penske-Media-Corp/pmc-larva/issues"
21
21
  },
22
22
  "dependencies": {
23
- "@penskemediacorp/larva-css": "^0.7.2",
23
+ "@penskemediacorp/larva-css": "^0.7.3",
24
24
  "@penskemediacorp/larva-js": "^0.7.0",
25
25
  "@penskemediacorp/larva-svg": "^0.7.0",
26
26
  "lodash.clonedeep": "^4.5.0"
27
27
  },
28
- "gitHead": "ff13a0e08348efa07604892192c7eeec9fbb1548"
28
+ "gitHead": "1bb3b456d8702f40a76e10a495e6d404220a7b9f"
29
29
  }