@penskemediacorp/larva-patterns 1.34.0 → 1.36.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/components/c-nav-link/c-nav-link.twig +6 -0
- package/modules/how-we-test-products/how-we-test-products.prototype.js +50 -0
- package/modules/how-we-test-products/how-we-test-products.twig +19 -0
- package/modules/table-of-contents/table-of-contents.prototype.js +38 -0
- package/modules/table-of-contents/table-of-contents.twig +44 -0
- package/package.json +4 -4
|
@@ -2,8 +2,14 @@
|
|
|
2
2
|
{% if c_nav_link_aria_current_attr %}
|
|
3
3
|
aria-current="{{ c_nav_link_aria_current_attr }}"
|
|
4
4
|
{% endif %}
|
|
5
|
+
{% if c_nav_link_title_attr %}
|
|
6
|
+
title="{{ c_nav_link_title_attr }}"
|
|
7
|
+
{% endif %}
|
|
5
8
|
>
|
|
6
9
|
{{ c_nav_link_text }}
|
|
10
|
+
{% if c_nav_link_markup %}
|
|
11
|
+
{{ c_nav_link_markup }}
|
|
12
|
+
{% endif %}
|
|
7
13
|
{% if c_nav_link_screen_reader_text %}
|
|
8
14
|
<span class="lrv-a-screen-reader-only">{{ c_nav_link_screen_reader_text }}</span>
|
|
9
15
|
{% endif %}
|
|
@@ -0,0 +1,50 @@
|
|
|
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_dek = clonedeep( require( '@penskemediacorp/larva-patterns/components/c-dek/c-dek.prototype.js' ) );
|
|
5
|
+
const story_card = clonedeep( require( '@penskemediacorp/larva-patterns/modules/story/story.prototype.js' ) );
|
|
6
|
+
|
|
7
|
+
c_title.c_title_classes = 'lrv-a-font-primary-l lrv-u-color-black';
|
|
8
|
+
c_title.c_title_text = 'How We Test Products';
|
|
9
|
+
c_title.c_title_url = false;
|
|
10
|
+
|
|
11
|
+
c_dek.c_dek_classes = 'lrv-a-font-secondary-l';
|
|
12
|
+
c_dek.c_dek_markup = 'Our journalists test hundreds of products every year for readers. We’ve developed a rigorous system for reviewing products objectively. Learn More ⇢.'
|
|
13
|
+
c_dek.c_dek_text = false;
|
|
14
|
+
|
|
15
|
+
story_card.c_span = false;
|
|
16
|
+
story_card.c_title.c_title_url = false;
|
|
17
|
+
story_card.c_title.c_title_classes = 'lrv-a-font-secondary-xl lrv-u-margin-b-050';
|
|
18
|
+
story_card.c_title.c_title_text = '500+';
|
|
19
|
+
story_card.c_timestamp = false;
|
|
20
|
+
story_card.c_tagline_author = false;
|
|
21
|
+
|
|
22
|
+
story_card.c_dek.c_dek_text = 'Products Tested';
|
|
23
|
+
story_card.c_dek.c_dek_classes = 'lrv-u-margin-tb-00 lrv-u-font-family-primary lrv-u-font-size-16 lrv-u-color-brand-secondary';
|
|
24
|
+
story_card.c_dek.c_dek_markup = false;
|
|
25
|
+
|
|
26
|
+
story_card.story_classes = 'lrv-u-width-50p@mobile-max lrv-u-border-color-grey-light lrv-u-padding-tb-125@mobile-max lrv-u-width-75p@tablet lrv-u-margin-lr-auto';
|
|
27
|
+
story_card.story_grid_classes = 'lrv-u-flex lrv-u-flex-direction-column lrv-u-height-100p lrv-u-justify-content-space-between';
|
|
28
|
+
|
|
29
|
+
story_card.c_lazy_image.c_lazy_image_classes = 'lrv-u-margin-lr-auto';
|
|
30
|
+
story_card.c_lazy_image.c_lazy_image_crop_class = '';
|
|
31
|
+
story_card.c_lazy_image.c_lazy_image_img_classes = '';
|
|
32
|
+
story_card.c_lazy_image.c_lazy_image_placeholder_url = 'https://farm5.staticflickr.com/4078/5441060528_31db7838ba_z.jpg';
|
|
33
|
+
|
|
34
|
+
how_we_test_products_items = [
|
|
35
|
+
story_card,
|
|
36
|
+
story_card,
|
|
37
|
+
story_card,
|
|
38
|
+
story_card,
|
|
39
|
+
];
|
|
40
|
+
|
|
41
|
+
module.exports = {
|
|
42
|
+
how_we_test_products_classes: 'lrv-u-text-align-center lrv-u-background-color-grey-lightest lrv-u-margin-tb-2',
|
|
43
|
+
how_we_test_products_outer_classes: 'lrv-u-width-75p@tablet lrv-u-margin-lr-auto lrv-u-padding-a-2',
|
|
44
|
+
how_we_test_products_banner_classes: '',
|
|
45
|
+
how_we_test_products_title_classes: '',
|
|
46
|
+
how_we_test_products_items_classes: 'lrv-u-flex lrv-u-flex-wrap-wrap@mobile-max',
|
|
47
|
+
how_we_test_products_items: how_we_test_products_items,
|
|
48
|
+
c_title: c_title,
|
|
49
|
+
c_dek: c_dek
|
|
50
|
+
};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<div class="how-we-test-products // {{ how_we_test_products_classes }}">
|
|
2
|
+
<div class="how-we-test-products-outer // {{ how_we_test_products_outer_classes }}">
|
|
3
|
+
<div class="{{ how_we_test_products_banner_classes }}">
|
|
4
|
+
<div class="how-we-test-products-title {{ how_we_test_products_title_classes }}">
|
|
5
|
+
{% if c_title %}
|
|
6
|
+
{% include "@larva/components/c-title/c-title.twig" with c_title %}
|
|
7
|
+
{% endif %}
|
|
8
|
+
{% if c_dek %}
|
|
9
|
+
{% include "@larva/components/c-dek/c-dek.twig" with c_dek %}
|
|
10
|
+
{% endif %}
|
|
11
|
+
</div>
|
|
12
|
+
</div>
|
|
13
|
+
<div class="how-we-test-product-items-outer // {{ how_we_test_products_items_classes }}">
|
|
14
|
+
{% for item in how_we_test_products_items %}
|
|
15
|
+
{% include "@larva/modules/story/story.twig" with item %}
|
|
16
|
+
{% endfor %}
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
19
|
+
<div>
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
const clonedeep = require('lodash.clonedeep');
|
|
2
|
+
|
|
3
|
+
const c_heading = clonedeep( require( '@penskemediacorp/larva-patterns/components/c-heading/c-heading.prototype' ) );
|
|
4
|
+
const c_nav_link = clonedeep( require( '@penskemediacorp/larva-patterns/components/c-nav-link/c-nav-link.prototype' ) );
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
c_heading.c_heading_classes = 'lrv-a-font-primary-l u-font-size-25 lrv-u-padding-b-075 lrv-u-border-b-1';
|
|
8
|
+
|
|
9
|
+
c_nav_link.c_nav_link_markup = 'Moon Landing on July 21,1968';
|
|
10
|
+
c_nav_link.c_nav_link_title_attr = 'Moon Landing on July 21,1968';
|
|
11
|
+
c_nav_link.c_nav_link_url = '#';
|
|
12
|
+
c_nav_link.c_nav_link_text = false;
|
|
13
|
+
|
|
14
|
+
const toc_list_items = [
|
|
15
|
+
c_nav_link,
|
|
16
|
+
c_nav_link,
|
|
17
|
+
c_nav_link,
|
|
18
|
+
c_nav_link,
|
|
19
|
+
c_nav_link,
|
|
20
|
+
];
|
|
21
|
+
|
|
22
|
+
const toc_mobile_list_items = toc_list_items;
|
|
23
|
+
|
|
24
|
+
module.exports = {
|
|
25
|
+
toc_classes: 'lrv-u-border-a-1 lrv-u-padding-a-1 lrv-u-margin-b-1',
|
|
26
|
+
toc_navigation_classes: 'lrv-js-MobileHeightToggle',
|
|
27
|
+
toc_list_classes: 'lrv-js-MobileHeightToggle-target lrv-u-color-brand-secondary a-font-theme-secondary-medium-xs lrv-a-unstyle-list lrv-a-grid lrv-a-cols2@desktop u-grid-row-gap-0 u-grid-gap-1 lrv-u-padding-t-050',
|
|
28
|
+
toc_mobile_list_classes: 'lrv-a-hidden@desktop lrv-u-color-brand-secondary a-font-theme-secondary-medium-xs lrv-a-unstyle-list lrv-a-grid u-grid-row-gap-0 lrv-u-padding-t-050',
|
|
29
|
+
toc_list_item_outer_classes: 'lrv-u-line-height-large lrv-u-width-100p',
|
|
30
|
+
toc_mobile_list_item_outer_classes: 'lrv-u-line-height-large lrv-u-width-100p',
|
|
31
|
+
toc_navigation_anchor_classes: 'lrv-u-display-block lrv-u-whitespace-nowrap lrv-u-overflow-hidden',
|
|
32
|
+
nav_title_text: 'View More',
|
|
33
|
+
nav_title_outer_classes: 'lrv-a-hidden@desktop a-heading-border lrv-u-text-align-center',
|
|
34
|
+
nav_title_classes: 'lrv-js-MobileHeightToggle-trigger lrv-u-background-color-white lrv-u-font-weight-normal lrv-u-padding-a-050 lrv-u-justify-content-center lrv-u-text-transform-capitalize',
|
|
35
|
+
toc_list_items: toc_list_items,
|
|
36
|
+
c_heading: c_heading,
|
|
37
|
+
toc_mobile_list_items: toc_mobile_list_items,
|
|
38
|
+
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
<div class="toc // {{ toc_classes }}" >
|
|
2
|
+
|
|
3
|
+
{% if c_heading %}
|
|
4
|
+
{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
|
|
5
|
+
{% endif %}
|
|
6
|
+
|
|
7
|
+
<nav class="toc-navigation // {{ toc_navigation_classes }}"
|
|
8
|
+
{% if nav_title_id_attr %}
|
|
9
|
+
aria-label="{{ nav_title_id_attr }}"
|
|
10
|
+
{% endif %}
|
|
11
|
+
{% if nav_list_labelledby_attr %}
|
|
12
|
+
aria-labelledby="{{ nav_list_labelledby_attr }}"
|
|
13
|
+
{% endif %}
|
|
14
|
+
>
|
|
15
|
+
|
|
16
|
+
<ul class="toc-list // {{ toc_list_classes }}">
|
|
17
|
+
{% for item in toc_list_items %}
|
|
18
|
+
<li class="toc-list-item // {{ toc_list_item_outer_classes }}">
|
|
19
|
+
{% include "@larva/components/c-nav-link/c-nav-link.twig" with item %}
|
|
20
|
+
</li>
|
|
21
|
+
{% endfor %}
|
|
22
|
+
</ul>
|
|
23
|
+
|
|
24
|
+
{% if toc_mobile_list_items %}
|
|
25
|
+
<ul class="toc-list-mobile // {{ toc_mobile_list_classes }}">
|
|
26
|
+
{% for item in toc_mobile_list_items %}
|
|
27
|
+
<li class="toc-list-item // {{ toc_mobile_list_item_outer_classes }}">
|
|
28
|
+
{% include "@larva/components/c-nav-link/c-nav-link.twig" with item %}
|
|
29
|
+
</li>
|
|
30
|
+
{% endfor %}
|
|
31
|
+
</ul>
|
|
32
|
+
{% endif %}
|
|
33
|
+
|
|
34
|
+
{% if nav_title_text %}
|
|
35
|
+
{% if nav_title_outer_classes %}
|
|
36
|
+
<div class="nav__title-outer {{ nav_title_outer_classes }}">
|
|
37
|
+
{% endif %}
|
|
38
|
+
<h4 id="{{ nav_title_id_attr }}" class="nav__title {{ nav_title_classes }}">{{ nav_title_text }}</h4>
|
|
39
|
+
{% if nav_title_outer_classes %}
|
|
40
|
+
</div>
|
|
41
|
+
{% endif %}
|
|
42
|
+
{% endif %}
|
|
43
|
+
</nav>
|
|
44
|
+
</div>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@penskemediacorp/larva-patterns",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.36.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.36.0",
|
|
24
|
+
"@penskemediacorp/larva-js": "^1.36.0",
|
|
25
25
|
"@penskemediacorp/larva-svg": "^1.28.0",
|
|
26
26
|
"lodash.clonedeep": "^4.5.0"
|
|
27
27
|
},
|
|
28
|
-
"gitHead": "
|
|
28
|
+
"gitHead": "af91f6d9a672911cb09d93df2de9e16494d719ee"
|
|
29
29
|
}
|