@penskemediacorp/larva-patterns 1.39.0 → 1.40.0
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/modules/product-grid/product-grid.prototype.js +46 -0
- package/modules/product-grid/product-grid.twig +21 -0
- package/objects/o-product-card/o-product-card.primary.js +9 -0
- package/objects/o-product-card/o-product-card.prototype.js +60 -0
- package/objects/o-product-card/o-product-card.twig +64 -0
- package/package.json +4 -4
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
const clonedeep = require( 'lodash.clonedeep' );
|
|
2
|
+
|
|
3
|
+
const c_title = clonedeep(
|
|
4
|
+
require( '@penskemediacorp/larva-patterns/components/c-title/c-title.prototype.js' )
|
|
5
|
+
);
|
|
6
|
+
|
|
7
|
+
const o_product_card = clonedeep(
|
|
8
|
+
require( '../../objects/o-product-card/o-product-card.prototype' )
|
|
9
|
+
);
|
|
10
|
+
|
|
11
|
+
const o_product_card_primary = clonedeep(
|
|
12
|
+
require( '../../objects/o-product-card/o-product-card.primary' )
|
|
13
|
+
);
|
|
14
|
+
|
|
15
|
+
const product_grid_header_verdict_text = 'Verdict';
|
|
16
|
+
const product_grid_header_pros_text = 'Pros';
|
|
17
|
+
const product_grid_header_cons_text = 'Cons';
|
|
18
|
+
|
|
19
|
+
o_product_card.o_product_card_classes = 'lrv-u-border-a-1@mobile-max lrv-u-border-color-grey-light lrv-u-width-100p';
|
|
20
|
+
o_product_card.o_product_card_link_classes =
|
|
21
|
+
'lrv-a-unstyle-link lrv-u-display-block lrv-a-children-border-vertical lrv-a-children-border--grey-light lrv-u-height-100p lrv-u-flex lrv-u-flex-direction-column';
|
|
22
|
+
|
|
23
|
+
o_product_card.product_grid_header_verdict_text =
|
|
24
|
+
product_grid_header_verdict_text;
|
|
25
|
+
o_product_card.product_grid_header_pros_text =
|
|
26
|
+
product_grid_header_pros_text;
|
|
27
|
+
o_product_card.product_grid_header_cons_text =
|
|
28
|
+
product_grid_header_cons_text;
|
|
29
|
+
|
|
30
|
+
o_product_card_primary.o_product_card_classes += ' lrv-u-border-a-1@mobile-max lrv-u-border-color-grey-light';
|
|
31
|
+
o_product_card_primary.o_product_card_link_classes +=
|
|
32
|
+
' lrv-a-unstyle-link lrv-u-display-block lrv-a-children-border-vertical lrv-a-children-border--grey-light lrv-u-height-100p lrv-u-flex lrv-u-flex-direction-column';
|
|
33
|
+
|
|
34
|
+
module.exports = {
|
|
35
|
+
product_grid_classes:
|
|
36
|
+
'lrv-u-margin-tb-2 lrv-u-flex@desktop lrv-a-children-border-horizontal lrv-a-children-border--grey-light lrv-u-border-a-1@desktop lrv-u-border-color-grey-light lrv-a-space-children--3 lrv-a-space-children-vertical@mobile-max',
|
|
37
|
+
product_grid_items: [
|
|
38
|
+
o_product_card,
|
|
39
|
+
o_product_card_primary,
|
|
40
|
+
o_product_card,
|
|
41
|
+
o_product_card,
|
|
42
|
+
],
|
|
43
|
+
product_grid_header_verdict_text,
|
|
44
|
+
product_grid_header_pros_text,
|
|
45
|
+
product_grid_header_cons_text,
|
|
46
|
+
};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
<div class="product-grid {{product_grid_classes}}">
|
|
2
|
+
<div class="product-grid__header lrv-a-children-border-vertical lrv-u-flex lrv-u-flex-direction-column lrv-a-hidden@desktop-max">
|
|
3
|
+
<div class="product-grid__header-details lrv-u-flex-grow-1">
|
|
4
|
+
{{product_grid_header_details_text}}
|
|
5
|
+
</div>
|
|
6
|
+
<div class="product-grid__header-verdict best-of-verdict lrv-u-padding-lr-1 lrv-u-padding-t-1 lrv-a-font-secondary-m">
|
|
7
|
+
{{product_grid_header_verdict_text}}
|
|
8
|
+
</div>
|
|
9
|
+
<div class="product-grid__header-pros best-of-pros lrv-u-padding-lr-1 lrv-u-padding-t-1 lrv-a-font-secondary-m">
|
|
10
|
+
{{product_grid_header_pros_text}}
|
|
11
|
+
</div>
|
|
12
|
+
<div class="product-grid__header-cons best-of-cons lrv-u-padding-lr-1 lrv-u-padding-t-1 lrv-a-font-secondary-m">
|
|
13
|
+
{{product_grid_header_cons_text}}
|
|
14
|
+
</div>
|
|
15
|
+
</div>
|
|
16
|
+
{% if product_grid_items %}
|
|
17
|
+
{% for item in product_grid_items %}
|
|
18
|
+
{% include "@larva/objects/o-product-card/o-product-card.twig" with item %}
|
|
19
|
+
{% endfor %}
|
|
20
|
+
{% endif %}
|
|
21
|
+
</div>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
const clonedeep = require( 'lodash.clonedeep' );
|
|
2
|
+
|
|
3
|
+
const o_product_card = clonedeep( require( './o-product-card.prototype' ) );
|
|
4
|
+
|
|
5
|
+
o_product_card.o_product_card_classes = 'o-product-card--primary lrv-u-border-a-1@mobile-max lrv-u-border-color-grey-light lrv-u-width-100p';
|
|
6
|
+
o_product_card.o_product_card_header_classes = 'lrv-u-padding-a-025 lrv-u-text-align-center lrv-u-background-color-brand-primary';
|
|
7
|
+
o_product_card.c_title_award.c_title_classes = 'lrv-u-border-a-2 lrv-a-font-secondary-m lrv-u-padding-tb-050';
|
|
8
|
+
|
|
9
|
+
module.exports = o_product_card;
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
const clonedeep = require( 'lodash.clonedeep' );
|
|
2
|
+
|
|
3
|
+
const c_title = clonedeep( require( '@penskemediacorp/larva-patterns/components/c-title/c-title.prototype.js' ) );
|
|
4
|
+
const c_button_prototype = require( '@penskemediacorp/larva-patterns/components/c-button/c-button.brand-basic.js' );
|
|
5
|
+
const c_tagline_prototype = require( '@penskemediacorp/larva-patterns/components/c-tagline/c-tagline.prototype.js' );
|
|
6
|
+
const c_lazy_image_prototype = require( '@penskemediacorp/larva-patterns/components/c-lazy-image/c-lazy-image.prototype.js' );
|
|
7
|
+
const c_dek = clonedeep(
|
|
8
|
+
require( '@penskemediacorp/larva-patterns/components/c-dek/c-dek.prototype.js' )
|
|
9
|
+
);
|
|
10
|
+
|
|
11
|
+
c_title.c_title_url = false;
|
|
12
|
+
|
|
13
|
+
const c_title_award = clonedeep( c_title );
|
|
14
|
+
|
|
15
|
+
const c_title_brand = clonedeep( c_title );
|
|
16
|
+
const c_lazy_image = clonedeep( c_lazy_image_prototype );
|
|
17
|
+
const c_tagline_product = clonedeep( c_tagline_prototype );
|
|
18
|
+
const c_button_buy = clonedeep( c_button_prototype );
|
|
19
|
+
|
|
20
|
+
c_dek.c_dek_classes = 'lrv-u-padding-a-075 lrv-u-margin-tb-00 lrv-a-font-secondary-s';
|
|
21
|
+
|
|
22
|
+
const c_dek_verdict = clonedeep( c_dek );
|
|
23
|
+
const c_dek_pros = clonedeep( c_dek );
|
|
24
|
+
const c_dek_cons = clonedeep( c_dek );
|
|
25
|
+
|
|
26
|
+
c_title_award.c_title_classes = 'lrv-u-color-white lrv-a-font-secondary-m lrv-u-border-a-2 lrv-u-padding-tb-050';
|
|
27
|
+
|
|
28
|
+
c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-1x1';
|
|
29
|
+
|
|
30
|
+
c_title_brand.c_title_text = 'Google';
|
|
31
|
+
c_title_brand.c_title_classes = 'lrv-u-padding-t-1 lrv-a-font-primary-m';
|
|
32
|
+
c_title_brand.c_title_link_classes = 'lrv-a-unstyle-link';
|
|
33
|
+
|
|
34
|
+
c_tagline_product.c_tagline_classes = 'lrv-u-margin-tb-050 lrv-a-font-secondary-s';
|
|
35
|
+
c_tagline_product.c_tagline_text = 'Smart Thermostat For Home';
|
|
36
|
+
|
|
37
|
+
c_button_buy.c_button_text = 'Buy Now';
|
|
38
|
+
c_button_buy.c_button_classes =
|
|
39
|
+
'lrv-u-cursor-pointer lrv-u-padding-tb-025 lrv-u-padding-lr-2 lrv-u-background-color-brand-primary lrv-u-color-black lrv-a-font-secondary-m lrv-u-text-transform-uppercase ';
|
|
40
|
+
|
|
41
|
+
module.exports = {
|
|
42
|
+
o_product_card_classes: 'lrv-u-border-a-1',
|
|
43
|
+
o_product_card_header_classes:
|
|
44
|
+
'lrv-u-padding-a-025 lrv-u-text-align-center lrv-u-background-color-brand-secondary',
|
|
45
|
+
o_product_card_details_classes:
|
|
46
|
+
'lrv-u-text-align-center lrv-u-padding-tb-2 lrv-u-padding-lr-1 lrv-u-flex-grow-1',
|
|
47
|
+
o_product_card_verdict_classes: 'lrv-u-flex',
|
|
48
|
+
o_product_card_pros_classes: 'lrv-u-flex',
|
|
49
|
+
o_product_card_cons_classes: 'lrv-u-flex',
|
|
50
|
+
o_product_card_link_url: '#',
|
|
51
|
+
o_product_card_link_classes: 'lrv-a-unstyle-link',
|
|
52
|
+
c_title_award,
|
|
53
|
+
c_title_brand,
|
|
54
|
+
c_lazy_image,
|
|
55
|
+
c_tagline_product,
|
|
56
|
+
c_button_buy,
|
|
57
|
+
c_dek_verdict,
|
|
58
|
+
c_dek_pros,
|
|
59
|
+
c_dek_cons,
|
|
60
|
+
};
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
<div class="o-product-card {{o_product_card_classes}}">
|
|
2
|
+
{% if o_product_card_link_url %}
|
|
3
|
+
<a tabindex="0" href="{{ o_product_card_link_url }}" class="o-product-card__link {{ o_product_card_link_classes }}">
|
|
4
|
+
{% endif %}
|
|
5
|
+
|
|
6
|
+
<div class="o-product-card__award {{o_product_card_header_classes}}">
|
|
7
|
+
{% if c_title_award %}
|
|
8
|
+
{% include "@larva/components/c-title/c-title.twig" with c_title_award %}
|
|
9
|
+
{% endif %}
|
|
10
|
+
</div>
|
|
11
|
+
|
|
12
|
+
<div class="o-product-card__product-details {{o_product_card_details_classes}}">
|
|
13
|
+
{% if c_lazy_image %}
|
|
14
|
+
{% include "@larva/components/c-lazy-image/c-lazy-image.twig" with c_lazy_image %}
|
|
15
|
+
{% endif %}
|
|
16
|
+
|
|
17
|
+
{% if c_title_brand %}
|
|
18
|
+
{% include "@larva/components/c-title/c-title.twig" with c_title_brand %}
|
|
19
|
+
{% endif %}
|
|
20
|
+
|
|
21
|
+
{% if c_tagline_product %}
|
|
22
|
+
{% include "@larva/components/c-tagline/c-tagline.twig" with c_tagline_product %}
|
|
23
|
+
{% endif %}
|
|
24
|
+
|
|
25
|
+
{% if c_button_buy %}
|
|
26
|
+
{% include "@larva/components/c-button/c-button.twig" with c_button_buy %}
|
|
27
|
+
{% endif %}
|
|
28
|
+
</div>
|
|
29
|
+
|
|
30
|
+
<div class="o-product-card__verdict best-of-verdict {{o_product_card_verdict_classes}}" >
|
|
31
|
+
<div class="o-product-card__header-verdict lrv-a-hidden@desktop lrv-a-font-secondary-m lrv-u-padding-a-075">
|
|
32
|
+
{{product_grid_header_verdict_text}}
|
|
33
|
+
</div>
|
|
34
|
+
|
|
35
|
+
{% if c_dek_verdict %}
|
|
36
|
+
{% include "@larva/components/c-dek/c-dek.twig" with c_dek_verdict %}
|
|
37
|
+
{% endif %}
|
|
38
|
+
</div>
|
|
39
|
+
|
|
40
|
+
<div class="o-product-card__pros best-of-pros {{o_product_card_pros_classes}}" >
|
|
41
|
+
<div class="o-product-card__header-pros lrv-a-hidden@desktop lrv-a-font-secondary-m lrv-u-padding-a-075">
|
|
42
|
+
{{product_grid_header_pros_text}}
|
|
43
|
+
</div>
|
|
44
|
+
|
|
45
|
+
{% if c_dek_pros %}
|
|
46
|
+
{% include "@larva/components/c-dek/c-dek.twig" with c_dek_pros %}
|
|
47
|
+
{% endif %}
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
<div class="o-product-card__cons best-of-cons {{o_product_card_cons_classes}}">
|
|
51
|
+
<div class="o-product-card__header-cons lrv-a-hidden@desktop lrv-a-font-secondary-m lrv-u-padding-a-075">
|
|
52
|
+
{{product_grid_header_cons_text}}
|
|
53
|
+
</div>
|
|
54
|
+
|
|
55
|
+
{% if c_dek_cons %}
|
|
56
|
+
{% include "@larva/components/c-dek/c-dek.twig" with c_dek_cons %}
|
|
57
|
+
{% endif %}
|
|
58
|
+
</div>
|
|
59
|
+
|
|
60
|
+
{% if o_product_card_link_url %}
|
|
61
|
+
</a>
|
|
62
|
+
{% endif %}
|
|
63
|
+
|
|
64
|
+
</div>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@penskemediacorp/larva-patterns",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.40.0",
|
|
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": "^1.
|
|
24
|
-
"@penskemediacorp/larva-js": "^1.
|
|
23
|
+
"@penskemediacorp/larva-css": "^1.40.0",
|
|
24
|
+
"@penskemediacorp/larva-js": "^1.40.0",
|
|
25
25
|
"@penskemediacorp/larva-svg": "^1.28.0",
|
|
26
26
|
"lodash.clonedeep": "^4.5.0"
|
|
27
27
|
},
|
|
28
|
-
"gitHead": "
|
|
28
|
+
"gitHead": "b136705c54403a9430348d4e48579e53d7b7aeb6"
|
|
29
29
|
}
|