@penskemediacorp/larva-patterns 0.7.0 → 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.
- package/components/c-input/c-input.prototype.js +8 -0
- package/components/c-input/c-input.twig +14 -0
- package/modules/age-gate/age-gate.prototype.js +46 -29
- package/modules/age-gate/age-gate.twig +20 -9
- package/objects/o-input-group/o-input-group.prototype.js +11 -0
- package/objects/o-input-group/o-input-group.twig +5 -0
- package/package.json +3 -3
- package/components/c-text-input/c-text-input.prototype.js +0 -8
- package/components/c-text-input/c-text-input.twig +0 -13
- package/objects/o-text-input-group/o-text-input-group.prototype.js +0 -11
- package/objects/o-text-input-group/o-text-input-group.twig +0 -5
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
<label class="c-input" for="{{ c_input_id_attr }}">
|
|
2
|
+
<span class="{{ c_input_label_class }}">{{ c_input_label_text }}</span>
|
|
3
|
+
<input
|
|
4
|
+
id="{{ c_input_id_attr }}"
|
|
5
|
+
type="{{ c_input_type_attr }}"
|
|
6
|
+
class="{{ c_input_class }}"
|
|
7
|
+
name="{{ c_input_id_attr }}"
|
|
8
|
+
placeholder="{{ c_input_placeholder_attr }}"
|
|
9
|
+
aria-invalid="{{ c_input_aria_invalid_attr }}"
|
|
10
|
+
data-error="{{ c_input_error_attr }}"
|
|
11
|
+
size="{{ c_input_size_attr }}"
|
|
12
|
+
maxlength="{{ c_input_maxlength_attr }}"
|
|
13
|
+
/>
|
|
14
|
+
</label>
|
|
@@ -1,51 +1,68 @@
|
|
|
1
1
|
const clonedeep = require('lodash.clonedeep');
|
|
2
2
|
|
|
3
|
-
const
|
|
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
|
-
const
|
|
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
|
-
|
|
10
|
-
|
|
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
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
16
|
+
o_input_group.o_input_group_class = 'lrv-u-margin-b-2';
|
|
17
|
+
o_input_group_item = clonedeep( o_input_group.o_input_group_items[0] );
|
|
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';
|
|
19
|
+
o_input_group_item.c_input_size_attr = 2;
|
|
20
|
+
o_input_group_item.c_input_maxlength_attr = 4;
|
|
20
21
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
22
|
+
o_input_day_item = clonedeep( o_input_group_item );
|
|
23
|
+
o_input_month_item = clonedeep( o_input_group_item );
|
|
24
|
+
o_input_year_item = clonedeep( o_input_group_item );
|
|
24
25
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
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;
|
|
28
31
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
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
|
+
|
|
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;
|
|
43
|
+
|
|
44
|
+
o_input_group.o_input_group_items = [
|
|
45
|
+
o_input_month_item,
|
|
46
|
+
o_input_day_item,
|
|
47
|
+
o_input_year_item
|
|
33
48
|
];
|
|
34
49
|
|
|
35
|
-
c_button.
|
|
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 = {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
57
|
+
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',
|
|
58
|
+
age_gate_inner_class: 'lrv-u-max-width-1000 lrv-u-margin-lr-auto',
|
|
59
|
+
age_gate_form_class: 'lrv-u-border-b-1',
|
|
60
|
+
age_gate_error_class: '',
|
|
61
|
+
form_wrapper_class: '',
|
|
62
|
+
age_gate_footer_class: 'lrv-u-border-t-1 lrv-u-margin-t-025',
|
|
46
63
|
c_heading,
|
|
47
|
-
|
|
48
|
-
|
|
64
|
+
c_svg_header,
|
|
65
|
+
o_input_group,
|
|
49
66
|
c_button,
|
|
50
67
|
c_dek
|
|
51
68
|
};
|
|
@@ -1,26 +1,37 @@
|
|
|
1
|
-
<div class="age-gate // js-AgeGate {{
|
|
2
|
-
<div class="age-gate-inner // {{
|
|
3
|
-
<div class="age-gate-header // {{
|
|
4
|
-
{%
|
|
1
|
+
<div class="age-gate // js-AgeGate {{ age_gate_class }}">
|
|
2
|
+
<div class="age-gate-inner // {{ age_gate_inner_class }}">
|
|
3
|
+
<div class="age-gate-header // {{ age_gate_header_class }}">
|
|
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 %}
|
|
8
13
|
</div>
|
|
9
|
-
<div class="age-gate-form // {{
|
|
14
|
+
<div class="age-gate-form // {{ age_gate_form_class }}">
|
|
10
15
|
<form class="js-AgeGateForm">
|
|
11
|
-
{% if
|
|
12
|
-
{% include "@larva/objects/o-
|
|
16
|
+
{% if o_input_group %}
|
|
17
|
+
{% include "@larva/objects/o-input-group/o-input-group.twig" with o_input_group %}
|
|
13
18
|
{% endif %}
|
|
14
|
-
<div class="age-gate-error // {{
|
|
19
|
+
<div class="age-gate-error // {{ age_gate_error_class }}"></div>
|
|
15
20
|
<div class="age-gate-button-wrapper">
|
|
16
21
|
{% include "@larva/components/c-button/c-button.twig" with c_button %}
|
|
17
22
|
</div>
|
|
18
23
|
</form>
|
|
19
24
|
</div>
|
|
20
|
-
<div class="age-gate-footer // {{
|
|
25
|
+
<div class="age-gate-footer // {{ age_gate_footer_class }}">
|
|
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>
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
const clonedeep = require( 'lodash.clonedeep' );
|
|
2
|
+
const c_input = clonedeep(require('@penskemediacorp/larva-patterns/components/c-input/c-input.prototype'));
|
|
3
|
+
|
|
4
|
+
module.exports = {
|
|
5
|
+
o_input_group_class: '',
|
|
6
|
+
o_input_group_items: [
|
|
7
|
+
c_input,
|
|
8
|
+
c_input,
|
|
9
|
+
c_input
|
|
10
|
+
]
|
|
11
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@penskemediacorp/larva-patterns",
|
|
3
|
-
"version": "0.7.
|
|
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.
|
|
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": "
|
|
28
|
+
"gitHead": "1bb3b456d8702f40a76e10a495e6d404220a7b9f"
|
|
29
29
|
}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
module.exports = {
|
|
2
|
-
c_text_input_id: 'inputExample',
|
|
3
|
-
c_text_input_label_classes: 'lrv-a-screen-reader-only',
|
|
4
|
-
c_text_input_label_text: 'Input Example',
|
|
5
|
-
c_text_input_classes: '',
|
|
6
|
-
c_text_input_name: 'input_example',
|
|
7
|
-
c_text_input_placeholder: 'Enter text.',
|
|
8
|
-
};
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
<label class="c-text-input" for="{{ c_text_input_id }}">
|
|
2
|
-
<span class="{{ c_text_input_label_classes }}">{{ c_text_input_label_text }}</span>
|
|
3
|
-
<input
|
|
4
|
-
type="text"
|
|
5
|
-
class="{{ c_text_input_classes }}"
|
|
6
|
-
name="{{ c_text_input_name }}"
|
|
7
|
-
placeholder="{{ c_text_input_placeholder }}"
|
|
8
|
-
aria-invalid="{{ c_text_input_aria_invalid }}"
|
|
9
|
-
data-error="{{ c_text_input_error }}"
|
|
10
|
-
size="{{ c_text_input_size }}"
|
|
11
|
-
maxlength="{{ c_text_input_maxlength }}"
|
|
12
|
-
/>
|
|
13
|
-
</label>
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
const clonedeep = require( 'lodash.clonedeep' );
|
|
2
|
-
const c_text_input = clonedeep(require('@penskemediacorp/larva-patterns/components/c-text-input/c-text-input.prototype'));
|
|
3
|
-
|
|
4
|
-
module.exports = {
|
|
5
|
-
o_text_input_group_classes: '',
|
|
6
|
-
o_text_input_group_items: [
|
|
7
|
-
c_text_input,
|
|
8
|
-
c_text_input,
|
|
9
|
-
c_text_input
|
|
10
|
-
]
|
|
11
|
-
};
|