@penskemediacorp/larva-patterns 1.27.1 → 1.28.1-alpha.141
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/algorithms/a-term-content-grid/README.md +1 -0
- package/algorithms/a-term-content-grid/a-term-content-grid.html +27 -0
- package/algorithms/a-term-content-grid/a-term-content-grid.prototype.js +11 -0
- package/components/c-nav-link/c-nav-link.twig +6 -0
- package/components/c-timestamp/c-timestamp.twig +3 -0
- package/components/c-title/c-title.twig +5 -1
- package/modules/article-timestamp/article-timestamp.prototype.js +1 -1
- package/modules/author/author.prototype.js +3 -3
- package/modules/author-blurb/author-blurb.prototype.js +3 -3
- package/modules/author-details/author-details.prototype.js +5 -5
- package/modules/badge/badge.prototype.js +1 -1
- package/modules/banner/banner.twig +12 -4
- package/modules/brands-most-popular/brands-most-popular.prototype.js +1 -0
- package/modules/breaking-news/breaking-news.prototype.js +2 -2
- package/modules/buy-now/buy-now.prototype.js +1 -1
- package/modules/container/container.prototype.js +1 -1
- package/modules/content-showcase/content-showcase.prototype.js +3 -3
- package/modules/content-showcase/content-showcase.the-moth.js +5 -5
- package/modules/fact-list/README.md +1 -0
- package/modules/fact-list/fact-list.prototype.js +21 -0
- package/modules/fact-list/fact-list.twig +14 -0
- package/modules/fact-list-item/README.md +1 -0
- package/modules/fact-list-item/fact-list-item.prototype.js +28 -0
- package/modules/fact-list-item/fact-list-item.thumbnail.js +13 -0
- package/modules/fact-list-item/fact-list-item.twig +17 -0
- package/modules/fact-list-menu/README.md +1 -0
- package/modules/fact-list-menu/fact-list-menu.prototype.js +40 -0
- package/modules/fact-list-menu/fact-list-menu.twig +11 -0
- package/modules/faq/faq.prototype.js +30 -0
- package/modules/faq/faq.twig +17 -0
- package/modules/footer-newsletter/footer-newsletter.prototype.js +7 -3
- package/modules/footer-tip/footer-tip.prototype.js +2 -2
- package/modules/heading/heading.twig +1 -1
- 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/mega-menu-footer/mega-menu-footer.prototype.js +7 -0
- package/modules/mega-menu-footer/mega-menu-footer.twig +26 -4
- package/modules/mega-menu-item/mega-menu-item.twig +8 -2
- package/modules/multiple-products/multiple-products.prototype.js +20 -0
- package/modules/multiple-products/multiple-products.twig +14 -0
- package/modules/newsletter/newsletter.prototype.js +1 -1
- package/modules/newsletter-cta/newsletter-cta.prototype.js +1 -0
- package/modules/newsletter-cta/newsletter-cta.twig +1 -1
- package/modules/newswire/newswire.prototype.js +1 -0
- package/modules/page-404/page-404.smart.js +60 -0
- package/modules/page-404/page-404.twig +16 -0
- package/modules/paragraph/paragraph.prototype.js +1 -0
- package/modules/paragraph/paragraph.twig +6 -1
- package/modules/post-content-image/post-content-image.twig +1 -1
- package/modules/product-card/product-card.prototype.js +41 -0
- package/modules/product-card/product-card.twig +57 -0
- package/modules/product-grid/product-grid.prototype.js +46 -0
- package/modules/product-grid/product-grid.twig +21 -0
- package/modules/pros-and-cons/pros-and-cons.prototype.js +15 -0
- package/modules/pros-and-cons/pros-and-cons.twig +12 -0
- package/modules/section-heading/section-heading.h2.js +1 -1
- package/modules/section-heading/section-heading.h3.js +1 -1
- package/modules/separator/separator.prototype.js +1 -0
- package/modules/separator/separator.twig +1 -1
- package/modules/table-of-contents/table-of-contents.prototype.js +38 -0
- package/modules/table-of-contents/table-of-contents.twig +44 -0
- package/modules/tag-list/README.md +1 -0
- package/modules/tag-list/tag-list.prototype.js +42 -0
- package/modules/tag-list/tag-list.thumbnail.js +49 -0
- package/modules/tag-list/tag-list.twig +16 -0
- package/modules/term-content-top/README.md +1 -0
- package/modules/term-content-top/term-content-top.heading-tags.js +14 -0
- package/modules/term-content-top/term-content-top.prototype.js +73 -0
- package/modules/term-content-top/term-content-top.twig +22 -0
- package/objects/o-card/o-card.twig +5 -1
- package/objects/o-faq-item/o-faq-item.prototype.js +18 -0
- package/objects/o-faq-item/o-faq-item.twig +8 -0
- package/objects/o-multiple-product-item/o-multiple-product-item.prototype.js +18 -0
- package/objects/o-multiple-product-item/o-multiple-product-item.twig +25 -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/objects/o-video-card/o-video-card.twig +6 -1
- package/package.json +6 -6
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Layout pattern for Term Content Top module.
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
<div class="lrv-a-wrapper">
|
|
2
|
+
<div class="{{ term_content_grid_layout_class }}">
|
|
3
|
+
<div class="lrv-a-term-content-grid__primary lrv-u-padding-a-1 \\ {{ term_content_grid_primary_class }}">
|
|
4
|
+
<div style="background-color: #f7f7f7; height: 300px;"></div>
|
|
5
|
+
</div>
|
|
6
|
+
|
|
7
|
+
<div class="{{ term_content_grid_secondary_class }} lrv-u-padding-a-1">
|
|
8
|
+
<ul class="{{ term_content_grid_fact_list_menu_class }}">
|
|
9
|
+
<li><a href="#">Link 1</a></li>
|
|
10
|
+
<li><a href="#">Link 2</a></li>
|
|
11
|
+
</ul>
|
|
12
|
+
<div>Magna hexagon stumptown pork belly paleo tilde.</div>
|
|
13
|
+
<div>Cat ipsum dolor sit amet, Why dog in house?</div>
|
|
14
|
+
</div>
|
|
15
|
+
|
|
16
|
+
<div class="{{ term_content_grid_tertiary_class }} lrv-u-padding-a-1">
|
|
17
|
+
<div>Cat ipsum dolor sit amet, Why dog in house?</div>
|
|
18
|
+
<div class="{{ term_content_grid_fact_list_class }}">
|
|
19
|
+
<div class="{{ term_content_grid_fact_list_item_class }}">
|
|
20
|
+
<dt class="{{ term_content_grid_fact_list_dt_class }}">Definition Term, column 1</dt>
|
|
21
|
+
<dd class="{{ term_content_grid_fact_list_dd_class }}">Definition Description 1, column 2</dd>
|
|
22
|
+
<dd class="{{ term_content_grid_fact_list_dd_class }}">Definition Description 2, column 2</dd>
|
|
23
|
+
</div>
|
|
24
|
+
</div>
|
|
25
|
+
</div>
|
|
26
|
+
</div>
|
|
27
|
+
</div>
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
module.exports = {
|
|
2
|
+
term_content_grid_layout_class: 'lrv-a-term-content-grid',
|
|
3
|
+
term_content_grid_primary_class: 'lrv-a-term-content-grid__primary',
|
|
4
|
+
term_content_grid_secondary_class: 'lrv-a-term-content-grid__secondary',
|
|
5
|
+
term_content_grid_tertiary_class: 'lrv-a-term-content-grid__tertiary',
|
|
6
|
+
term_content_grid_fact_list_class: 'lrv-a-term-content-grid__fact-list',
|
|
7
|
+
term_content_grid_fact_list_item_class: 'lrv-a-term-content-grid__fact-list-item',
|
|
8
|
+
term_content_grid_fact_list_dt_class: 'lrv-a-term-content-grid__fact-list-dt',
|
|
9
|
+
term_content_grid_fact_list_dd_class: 'lrv-a-term-content-grid__fact-list-dd',
|
|
10
|
+
term_content_grid_fact_list_menu_class: 'lrv-a-term-content-grid__fact-list-menu',
|
|
11
|
+
};
|
|
@@ -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 %}
|
|
@@ -11,7 +11,11 @@
|
|
|
11
11
|
{% endif %}
|
|
12
12
|
|
|
13
13
|
{% if c_title_url %}
|
|
14
|
-
<a href="{{ c_title_url }}" class="c-title__link {{ c_title_link_classes }}"
|
|
14
|
+
<a href="{{ c_title_url }}" class="c-title__link {{ c_title_link_classes }}"
|
|
15
|
+
{% if c_title_url_target_blank %}
|
|
16
|
+
target="_blank" rel="noopener noreferrer"
|
|
17
|
+
{% endif %}
|
|
18
|
+
{{ c_title_link_data_attr }}>
|
|
15
19
|
{% endif %}
|
|
16
20
|
|
|
17
21
|
{% if c_title_before_text %}
|
|
@@ -4,7 +4,7 @@ const c_timestamp_prototype = require( '@penskemediacorp/larva-patterns/componen
|
|
|
4
4
|
|
|
5
5
|
const c_timestamp = clonedeep( c_timestamp_prototype );
|
|
6
6
|
c_timestamp.c_timestamp_classes =
|
|
7
|
-
'lrv-u-
|
|
7
|
+
'lrv-u-display-inline-block lrv-u-color-black lrv-u-font-size-14 lrv-u-text-transform-uppercase';
|
|
8
8
|
c_timestamp.c_timestamp_text = 'September 3, 2019 7:51pm';
|
|
9
9
|
c_timestamp.c_timestamp_datetime_attr = '2019-09-03';
|
|
10
10
|
|
|
@@ -5,7 +5,7 @@ const c_tagline_prototype = require( '../../components/c-tagline/c-tagline.proto
|
|
|
5
5
|
const c_timestamp_prototype = require( '../../components/c-timestamp/c-timestamp.prototype' );
|
|
6
6
|
|
|
7
7
|
const c_timestamp = clonedeep( c_timestamp_prototype );
|
|
8
|
-
c_timestamp.c_timestamp_classes = 'lrv-u-
|
|
8
|
+
c_timestamp.c_timestamp_classes = 'lrv-u-margin-l-auto lrv-u-color-black';
|
|
9
9
|
c_timestamp.c_timestamp_text = 'September 3, 2019 7:51pm';
|
|
10
10
|
c_timestamp.c_timestamp_datetime_attr = '2019-09-03';
|
|
11
11
|
|
|
@@ -20,7 +20,7 @@ c_link_author.c_link_url = '#';
|
|
|
20
20
|
|
|
21
21
|
const c_tagline_multiple_authors = clonedeep( c_tagline_prototype );
|
|
22
22
|
c_tagline_multiple_authors.c_tagline_classes =
|
|
23
|
-
'lrv-u-display-inline lrv-a-children-link-color-black lrv-a-children-link-color-brand-primary:hover lrv-a-children-link-decoration-underline:hover lrv-u-
|
|
23
|
+
'lrv-u-display-inline lrv-u-margin-r-050 lrv-a-children-link-color-black lrv-a-children-link-color-brand-primary:hover lrv-a-children-link-decoration-underline:hover lrv-u-text-transform-uppercase lrv-u-letter-spacing-015 lrv-u-letter-spacing-012@mobile-max';
|
|
24
24
|
c_tagline_multiple_authors.c_tagline_markup =
|
|
25
25
|
"<a href='#'>Link 1</a>, <a href='#'>Link 2</a>";
|
|
26
26
|
c_tagline_multiple_authors.c_tagline_text = false;
|
|
@@ -40,7 +40,7 @@ module.exports = {
|
|
|
40
40
|
author_tagline_classes:
|
|
41
41
|
'lrv-u-margin-tb-00 lrv-u-text-transform-uppercase lrv-u-letter-spacing-015 lrv-u-letter-spacing-012@mobile-max',
|
|
42
42
|
author_button_classes:
|
|
43
|
-
'lrv-
|
|
43
|
+
'lrv-u-display-contents lrv-u-flex lrv-u-align-items-center lrv-a-unstyle-button js-PopOver',
|
|
44
44
|
author_detail_outer_classes:
|
|
45
45
|
'lrv-a-hidden@desktop-max lrv-a-glue lrv-a-glue--l-0 lrv-a-glue--t-100p js-PopOver-target',
|
|
46
46
|
is_multiple_author: false,
|
|
@@ -21,12 +21,12 @@ c_heading.c_heading_classes =
|
|
|
21
21
|
c_heading.c_heading_text = 'Mike Fleming Jr';
|
|
22
22
|
|
|
23
23
|
c_title.c_title_classes =
|
|
24
|
-
'lrv-u-font-family-primary lrv-u-font-weight-normal lrv-u-color-grey-dark lrv-u-font-size-14@mobile-max lrv-u-font-size-18 lrv-u-
|
|
24
|
+
'lrv-u-margin-b-1 lrv-u-font-family-primary lrv-u-font-weight-normal lrv-u-color-grey-dark lrv-u-font-size-14@mobile-max lrv-u-font-size-18 lrv-u-text-transform-uppercase';
|
|
25
25
|
c_title.c_title_text = 'Co-Editor-in-Chief, Film';
|
|
26
26
|
c_title.c_title_url = false;
|
|
27
27
|
|
|
28
28
|
c_tagline.c_tagline_classes +=
|
|
29
|
-
' lrv-u-
|
|
29
|
+
' lrv-u-margin-a-00 lrv-u-padding-t-1 lrv-u-font-size-14 lrv-u-font-weight-light lrv-u-font-size-16 lrv-u-font-size-18@desktop-xl ';
|
|
30
30
|
c_tagline.c_tagline_text =
|
|
31
31
|
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At quis risus sed vulputate odio ut enim blandit. Aliquam sem et tortor consequat id. Convallis aenean et tortor at risus viverra. Sagittis aliquam malesuada bibendum arcu vitae elementum curabitur vitae. Id aliquet lectus proin nibh nisl. Id diam maecenas ultricies mi. Luctus venenatis lectus magna fringilla urna porttitor rhoncus.';
|
|
32
32
|
|
|
@@ -40,7 +40,7 @@ for ( let i = 0; i < social.length; i++ ) {
|
|
|
40
40
|
|
|
41
41
|
c_icon.c_icon_name = social[ i ];
|
|
42
42
|
c_icon.c_icon_link_classes +=
|
|
43
|
-
' lrv-u-display-block lrv-u-border-radius-50p lrv-u-
|
|
43
|
+
' lrv-u-display-block lrv-u-border-radius-50p lrv-u-padding-a-025 lrv-u-color-grey lrv-u-background-color-white lrv-u-color-grey-dark:hover lrv-u-margin-r-1';
|
|
44
44
|
c_icon.c_icon_url = '#';
|
|
45
45
|
|
|
46
46
|
o_social_list_icons.push( c_icon );
|
|
@@ -29,18 +29,18 @@ for ( let i = 0; i < storyTitles.length; i++ ) {
|
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
c_title.c_title_classes =
|
|
32
|
-
'lrv-u-
|
|
32
|
+
'lrv-u-margin-r-auto lrv-u-width-100 lrv-u-font-size-13 lrv-u-font-weight-bold lrv-u-text-transform-uppercase';
|
|
33
33
|
c_title.c_title_url = '#';
|
|
34
34
|
c_title.c_title_text = 'PATRICIA MESCHINO';
|
|
35
35
|
c_title.c_title_link_classes = 'lrv-u-color-black';
|
|
36
36
|
|
|
37
37
|
o_nav.o_nav_classes =
|
|
38
|
-
'lrv-u-
|
|
38
|
+
'lrv-u-margin-t-075 lrv-u-border-t-1 lrv-u-padding-t-025 lrv-u-width-100p ';
|
|
39
39
|
o_nav.o_nav_title_text = '';
|
|
40
40
|
o_nav.o_nav_title_classes =
|
|
41
41
|
'lrv-u-padding-t-050 lrv-u-padding-b-025 lrv-u-font-family-primary lrv-u-font-size-20';
|
|
42
42
|
o_nav.o_nav_list_classes =
|
|
43
|
-
' lrv-u-
|
|
43
|
+
' lrv-u-border-t-1 lrv-u-border-b-1 lrv-u-padding-t-075 lrv-u-padding-l-1 lrv-u-font-size-13 lrv-u-list-style-type-disclosure-closed';
|
|
44
44
|
o_nav.o_nav_list_item_classes = 'lrv-u-padding-b-075';
|
|
45
45
|
|
|
46
46
|
c_icon_twitter.c_icon_name = 'twitter';
|
|
@@ -61,13 +61,13 @@ c_icon_mail.c_icon_link_classes = 'lrv-u-flex';
|
|
|
61
61
|
|
|
62
62
|
c_link_view_all = clonedeep( c_link_prototype );
|
|
63
63
|
c_link_view_all.c_link_classes =
|
|
64
|
-
'lrv-
|
|
64
|
+
'lrv-u-font-size-10 lrv-u-text-transform-uppercase lrv-a-unstyle-link';
|
|
65
65
|
c_link_view_all.c_link_text = 'View All Stories ▶';
|
|
66
66
|
c_link_view_all.c_link_url = '#';
|
|
67
67
|
|
|
68
68
|
module.exports = {
|
|
69
69
|
author_details_classes:
|
|
70
|
-
'lrv-u-
|
|
70
|
+
'lrv-u-flex lrv-u-flex-wrap-wrap lrv-u-margin-t-1 lrv-u-padding-lr-125 lrv-u-padding-t-125 lrv-u-padding-b-1 lrv-u-border-a-2 lrv-u-width-215 lrv-u-background-color-white lrv-a-glue-parent lrv-a-icon-after-arrow-top-left',
|
|
71
71
|
author_details_icons_classes:
|
|
72
72
|
'lrv-u-flex lrv-u-align-items-center lrv-u-margin-l-auto',
|
|
73
73
|
author_details_view_link_classes: ' lrv-u-flex lrv-u-margin-l-auto',
|
|
@@ -4,7 +4,7 @@ const c_span_prototye = require( '../../components/c-span/c-span.prototype' );
|
|
|
4
4
|
const c_span = clonedeep( c_span_prototye );
|
|
5
5
|
|
|
6
6
|
c_span.c_span_classes +=
|
|
7
|
-
' lrv-u-background-color-grey-light lrv-u-font-size-12
|
|
7
|
+
' lrv-u-padding-a-025 lrv-u-background-color-grey-light lrv-u-font-size-12';
|
|
8
8
|
c_span.c_span_text = 'Sponsored Video';
|
|
9
9
|
|
|
10
10
|
module.exports = {
|
|
@@ -1,10 +1,18 @@
|
|
|
1
1
|
<div class="banner // {{ banner_classes }}">
|
|
2
|
-
|
|
2
|
+
|
|
3
3
|
{% if c_lazy_image %}
|
|
4
|
-
|
|
4
|
+
<div class="banner__img // {{ banner_img_outer_classes }}">
|
|
5
|
+
{% include "@larva/components/c-lazy-image/c-lazy-image.twig" with c_lazy_image %}
|
|
6
|
+
</div>
|
|
5
7
|
{% endif %}
|
|
6
|
-
|
|
8
|
+
|
|
9
|
+
{% if c_tagline %}
|
|
10
|
+
<div class="banner__text // {{ banner_text_outer_classes }}">
|
|
11
|
+
{% include "@larva/components/c-tagline/c-tagline.twig" with c_tagline %}
|
|
12
|
+
</div>
|
|
13
|
+
{% endif %}
|
|
14
|
+
|
|
7
15
|
{% if screen_reader_text %}
|
|
8
|
-
<
|
|
16
|
+
<span class="lrv-a-screen-reader-only">{{ screen_reader_text }}</span>
|
|
9
17
|
{% endif %}
|
|
10
18
|
</div>
|
|
@@ -12,7 +12,7 @@ const c_icon = clonedeep(
|
|
|
12
12
|
|
|
13
13
|
c_heading.c_heading_text = 'Breaking News';
|
|
14
14
|
c_heading.c_heading_classes =
|
|
15
|
-
'lrv-
|
|
15
|
+
'lrv-u-margin-b-050@mobile-max lrv-u-margin-r-1 lrv-a-font-secondary-bold-l lrv-u-text-transform-uppercase';
|
|
16
16
|
|
|
17
17
|
c_title.c_title_text =
|
|
18
18
|
'US Stadiums Partnership, Inc. Files for Bankruptcy Amid Historic Cancellations';
|
|
@@ -21,7 +21,7 @@ c_title.c_title_classes =
|
|
|
21
21
|
c_title.c_title_link_classes = 'lrv-a-unstyle-link ';
|
|
22
22
|
|
|
23
23
|
c_icon.c_icon_link_classes =
|
|
24
|
-
'dismiss-news-banner lrv-u-
|
|
24
|
+
'dismiss-news-banner lrv-u-margin-l-auto lrv-u-width-16 lrv-u-height-16 lrv-u-color-white lrv-u-cursor-pointer lrv-u-color-white:hover';
|
|
25
25
|
c_icon.c_icon_url = '#';
|
|
26
26
|
c_icon.c_icon_target_attr = false;
|
|
27
27
|
c_icon.c_icon_name = 'close';
|
|
@@ -17,7 +17,7 @@ const c_icon_button = clonedeep(
|
|
|
17
17
|
c_icon_button.o_icon_button_url = true;
|
|
18
18
|
c_icon_button.o_button_url = '#';
|
|
19
19
|
c_icon_button.o_icon_button_classes +=
|
|
20
|
-
' lrv-a-buy-now__button lrv-u-
|
|
20
|
+
' lrv-a-buy-now__button lrv-u-border-t-3 lrv-u-border-r-1 lrv-u-border-b-3 lrv-u-border-l-1 lrv-u-padding-tb-050 lrv-u-padding-lr-1 lrv-u-border-color-currentColor lrv-u-background-color-white lrv-u-color-black lrv-u-font-size-14 lrv-u-font-weight-bold lrv-u-text-transform-uppercase';
|
|
21
21
|
c_icon_button.o_icon_button_target_attr = '_blank';
|
|
22
22
|
c_icon_button.o_icon_button_rel_attr = 'nofollow';
|
|
23
23
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
module.exports = {
|
|
2
2
|
container_markup: 'hello markup',
|
|
3
|
-
container_classes: 'lrv-
|
|
3
|
+
container_classes: 'lrv-u-margin-lr-auto lrv-a-font-body-m',
|
|
4
4
|
container_background_color_class: '',
|
|
5
5
|
container_color_class: '',
|
|
6
6
|
container_text_align_class: '',
|
|
@@ -14,7 +14,7 @@ o_card.o_card_link_url = '#';
|
|
|
14
14
|
o_card.o_card_image_wrap_classes =
|
|
15
15
|
'lrv-u-flex-basis-40p@desktop lrv-u-flex-basis-40p@desktop-xl lrv-u-flex-basis-25p@mobile-max';
|
|
16
16
|
o_card.o_card_content_classes =
|
|
17
|
-
'lrv-u-margin-l-1 lrv-u-
|
|
17
|
+
'lrv-u-margin-l-1 lrv-u-flex-basis-60p@desktop lrv-u-flex-basis-60p@desktop-xl lrv-u-flex-basis-55p@mobile-max lrv-u-color-brand-primary:hover';
|
|
18
18
|
|
|
19
19
|
o_card.c_lazy_image.c_lazy_image_link_url = '';
|
|
20
20
|
o_card.c_lazy_image.c_lazy_image_classes =
|
|
@@ -28,13 +28,13 @@ o_card.c_span = false;
|
|
|
28
28
|
o_card.c_title.c_title_url = '';
|
|
29
29
|
o_card.c_title.c_title_text =
|
|
30
30
|
'Perfection is rarely achieved in movies, but this heaven-sent concert doc hits the sweet spot.';
|
|
31
|
-
o_card.c_title.c_title_classes = 'lrv-u-
|
|
31
|
+
o_card.c_title.c_title_classes = 'lrv-u-margin-tb-1 lrv-u-font-weight-normal';
|
|
32
32
|
o_card.c_timestamp = false;
|
|
33
33
|
o_card.c_tagline = false;
|
|
34
34
|
o_card.o_author = false;
|
|
35
35
|
|
|
36
36
|
module.exports = {
|
|
37
37
|
content_showcase_items_classes:
|
|
38
|
-
'lrv-u-flex lrv-u-flex-direction-column@mobile-max lrv-u-padding-tb-1@desktop lrv-u-
|
|
38
|
+
'lrv-u-flex lrv-u-flex-direction-column@mobile-max lrv-u-padding-tb-1@desktop lrv-u-padding-lr-125@mobile-max lrv-u-width-100p',
|
|
39
39
|
content_showcase_items: [ o_card, o_card, o_card ],
|
|
40
40
|
};
|
|
@@ -13,29 +13,29 @@ o_card.c_tagline = false;
|
|
|
13
13
|
o_card.o_author = false;
|
|
14
14
|
|
|
15
15
|
o_card.o_card_classes =
|
|
16
|
-
'lrv-u-display-inline-flex lrv-u-flex-basis-100p@desktop-xl lrv-u-flex-basis-100p@desktop lrv-u-
|
|
16
|
+
'lrv-u-display-inline-flex lrv-u-flex-basis-100p@desktop-xl lrv-u-flex-basis-100p@desktop lrv-u-flex-shrink-0@mobile-max lrv-u-padding-tb-00@mobile-max';
|
|
17
17
|
o_card.o_card_link_classes = 'lrv-u-flex';
|
|
18
18
|
o_card.o_card_link_url = '#';
|
|
19
19
|
o_card.o_card_image_wrap_classes =
|
|
20
20
|
'lrv-u-flex-basis-40p@desktop lrv-u-flex-basis-40p@desktop-xl lrv-u-flex-basis-25p@mobile-max';
|
|
21
21
|
o_card.c_lazy_image.c_lazy_image_classes = 'lrv-u-width-100';
|
|
22
22
|
o_card.o_card_content_classes =
|
|
23
|
-
'lrv-u-
|
|
23
|
+
'lrv-u-flex-basis-60p@desktop lrv-u-flex-basis-60p@desktop-xl lrv-u-flex-basis-55p@mobile-max lrv-u-margin-l-1 lrv-u-color-black lrv-u-color-brand-primary:hover';
|
|
24
24
|
o_card.c_title.c_title_text = 'Canceling Noodle The Pug';
|
|
25
25
|
o_card.c_title.c_title_classes =
|
|
26
|
-
'lrv-
|
|
26
|
+
'lrv-u-margin-t-050 lrv-u-margin-b-00 lrv-a-font-body-l lrv-u-text-decoration-underline:hover lrv-u-line-height-copy';
|
|
27
27
|
o_card.c_title.c_title_link_classes =
|
|
28
28
|
'lrv-u-color-black lrv-u-color-brand-secondary-dark:hover';
|
|
29
29
|
o_card.c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-1x1';
|
|
30
30
|
o_card.article_kicker = article_kicker;
|
|
31
31
|
o_card.article_kicker.article_kicker_classes =
|
|
32
|
-
'lrv-u-color-black lrv-u-color-brand-secondary-dark:hover lrv-u-text-transform-uppercase lrv-a-font-basic-s
|
|
32
|
+
'lrv-u-position-relative lrv-u-padding-b-050 lrv-u-color-black lrv-u-color-brand-secondary-dark:hover lrv-u-text-transform-uppercase lrv-a-font-basic-s';
|
|
33
33
|
o_card.article_kicker.article_kicker_link_classes = 'lrv-u-color-black';
|
|
34
34
|
|
|
35
35
|
content_showcase.content_showcase_classes =
|
|
36
36
|
'the-moth lrv-u-border-t-1 lrv-u-font-family-body lrv-a-glue-parent';
|
|
37
37
|
content_showcase.content_showcase_items_classes =
|
|
38
|
-
'the-moth-items lrv-u-overflow-auto@mobile-max lrv-u-
|
|
38
|
+
'the-moth-items lrv-u-overflow-auto@mobile-max lrv-u-flex-shrink-0@mobile-max lrv-u-flex lrv-u-margin-t-025 lrv-u-border-t-1 lrv-u-border-b-1 lrv-u-padding-tb-150 lrv-u-padding-r-2@mobile-max lrv-u-padding-lr-125@mobile-max lrv-u-width-100p';
|
|
39
39
|
|
|
40
40
|
content_showcase.content_showcase_items = [ o_card, o_card, o_card, o_card ];
|
|
41
41
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Renders a list of `fact-list-item` modules. Module used to add schema data associated with a taxonomy term. Usage is associated with `pmc/term-content` plugin.
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
const clonedeep = require( 'lodash.clonedeep' );
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Larva includes.
|
|
5
|
+
*/
|
|
6
|
+
const c_title = clonedeep( require( '@penskemediacorp/larva-patterns/components/c-title/c-title.prototype' ) );
|
|
7
|
+
const fact_list_item = clonedeep( require( '@penskemediacorp/larva-patterns/modules/fact-list-item/fact-list-item.prototype' ) );
|
|
8
|
+
|
|
9
|
+
c_title.c_title_classes = '';
|
|
10
|
+
c_title.c_title_text = 'Fact List';
|
|
11
|
+
c_title.c_title_id_attr = 'fact-list';
|
|
12
|
+
c_title.c_title_url = '';
|
|
13
|
+
|
|
14
|
+
module.exports = {
|
|
15
|
+
c_title,
|
|
16
|
+
fact_list_classes: 'lrv-u-font-family-secondary lrv-u-margin-t-1 lrv-a-term-content-grid__tertiary',
|
|
17
|
+
fact_list_data_attributes: 'itemscope itemprop=Thing itemtype=http://schema.org/Thing',
|
|
18
|
+
fact_list_dl_classes: 'lrv-u-border-t-1 lrv-u-padding-t-1 lrv-u-margin-t-00 lrv-a-term-content-grid__fact-list',
|
|
19
|
+
fact_list_items: [ fact_list_item ],
|
|
20
|
+
fact_list_title_classes: 'lrv-u-margin-b-050 lrv-u-font-size-20',
|
|
21
|
+
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
{% if fact_list_items %}
|
|
2
|
+
<div class="fact-list // {{ fact_list_classes }}">
|
|
3
|
+
{% if c_title %}
|
|
4
|
+
<div class="fact-list-title // {{ fact_list_title_classes }}">
|
|
5
|
+
{% include "@larva/components/c-title/c-title.twig" with c_title %}
|
|
6
|
+
</div>
|
|
7
|
+
{% endif %}
|
|
8
|
+
<dl class="fact-list-items // {{ fact_list_dl_classes }}" {{ fact_list_data_attributes }}>
|
|
9
|
+
{% for fact_list_item in fact_list_items %}
|
|
10
|
+
{% include "@larva/modules/fact-list-item/fact-list-item.twig" with fact_list_item %}
|
|
11
|
+
{% endfor %}
|
|
12
|
+
</dl>
|
|
13
|
+
</div>
|
|
14
|
+
{% endif %}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Renders a description term and detail block. These blocks comprise the content of a `fact-list` module. Usage is associated with `pmc/term-content` plugin. A thumbnail variant is available to display a fact list item containing a tag list with images.
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
const clonedeep = require( 'lodash.clonedeep' );
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Larva includes.
|
|
5
|
+
*/
|
|
6
|
+
const c_dek = clonedeep( require( '@penskemediacorp/larva-patterns/components/c-dek/c-dek.prototype' ) );
|
|
7
|
+
const tag_list = clonedeep( require( '@penskemediacorp/larva-patterns/modules/tag-list/tag-list.prototype' ) );
|
|
8
|
+
|
|
9
|
+
c_dek.c_dek_markup = 'Term Content. <em>Rich text</em> <strong>is</strong> <a href="#">supported</a>.';
|
|
10
|
+
c_dek.c_dek_text = '';
|
|
11
|
+
|
|
12
|
+
module.exports = {
|
|
13
|
+
fact_list_item_classes: [
|
|
14
|
+
'lrv-a-cols2@tablet',
|
|
15
|
+
'lrv-u-border-b-1',
|
|
16
|
+
'lrv-u-border-color-grey-light',
|
|
17
|
+
'lrv-u-margin-b-1',
|
|
18
|
+
'lrv-u-padding-b-1',
|
|
19
|
+
'lrv-a-term-content-grid__fact-list-item',
|
|
20
|
+
].join( ' ' ),
|
|
21
|
+
fact_list_item_dd_classes: 'lrv-u-margin-l-00 lrv-a-term-content-grid__fact-list-dd',
|
|
22
|
+
fact_list_item_dd_data_attributes: 'itemprop=Thing itemtype=http://schema.org/Thing',
|
|
23
|
+
fact_list_item_dd_content: { ...c_dek, c_dek_classes: 'lrv-u-margin-tb-00 lrv-u-display-block' },
|
|
24
|
+
fact_list_item_tag_list: tag_list,
|
|
25
|
+
fact_list_item_dd_terms_classes: '',
|
|
26
|
+
fact_list_item_dt_classes: 'lrv-u-font-weight-bold lrv-a-term-content-grid__fact-list-dt',
|
|
27
|
+
fact_list_item_dt_text: 'Term Title',
|
|
28
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
const clonedeep = require( 'lodash.clonedeep' );
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Module includes.
|
|
5
|
+
*/
|
|
6
|
+
const fact_item = clonedeep( require( './fact-list-item.prototype' ) );
|
|
7
|
+
const tag_list = clonedeep( require( '@penskemediacorp/larva-patterns/modules/tag-list/tag-list.thumbnail' ) );
|
|
8
|
+
|
|
9
|
+
fact_item.fact_list_item_tag_list = tag_list;
|
|
10
|
+
|
|
11
|
+
module.exports = {
|
|
12
|
+
...fact_item,
|
|
13
|
+
};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<div class="fact-list-item // {{ fact_list_item_classes }}">
|
|
2
|
+
{% if fact_list_item_dt_text %}
|
|
3
|
+
<dt class="fact-list-item-dt // {{ fact_list_item_dt_classes }}">
|
|
4
|
+
{{ fact_list_item_dt_text }}
|
|
5
|
+
</dt>
|
|
6
|
+
{% endif %}
|
|
7
|
+
<dd class="fact-list-item-dd // {{ fact_list_item_dd_classes }}" {{ fact_list_item_dd_data_attributes }}>
|
|
8
|
+
{% if fact_list_item_dd_content %}
|
|
9
|
+
{% include "@larva/components/c-dek/c-dek.twig" with fact_list_item_dd_content %}
|
|
10
|
+
{% endif %}
|
|
11
|
+
{% if fact_list_item_tag_list %}
|
|
12
|
+
<div class="fact-list-item-tags // {{ fact_list_item_tag_list_classes }}">
|
|
13
|
+
{% include "@larva/modules/tag-list/tag-list.twig" with fact_list_item_tag_list %}
|
|
14
|
+
</div>
|
|
15
|
+
{% endif %}
|
|
16
|
+
</dd>
|
|
17
|
+
</div>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Renders menu of links to be displayed in the `term-content-top` module. Usage is associated with `pmc/term-content` plugin.
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
const clonedeep = require( 'lodash.clonedeep' );
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Larva includes.
|
|
5
|
+
*/
|
|
6
|
+
const c_link_prototype = require( '@penskemediacorp/larva-patterns/components/c-link/c-link.prototype.js' );
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Module includes.
|
|
10
|
+
*/
|
|
11
|
+
const c_link = clonedeep( c_link_prototype );
|
|
12
|
+
|
|
13
|
+
/* Generate a list of menu item titles. */
|
|
14
|
+
const titles = [ 'Wikipedia', 'IMDB', 'Amazon', 'Google' ];
|
|
15
|
+
|
|
16
|
+
/* Generate a list of `c_span` links. */
|
|
17
|
+
const fact_list_menu_items = Array.from( titles, ( title, index ) => ( {
|
|
18
|
+
...c_link,
|
|
19
|
+
c_link_text: title,
|
|
20
|
+
c_link_classes: 'lrv-u-color-black',
|
|
21
|
+
c_link_url: `#test-link-${ index + 1 }`,
|
|
22
|
+
} ) );
|
|
23
|
+
|
|
24
|
+
module.exports = {
|
|
25
|
+
fact_list_menu_classes: 'lrv-u-margin-t-1',
|
|
26
|
+
fact_list_menu_ul_classes: [
|
|
27
|
+
'lrv-a-unstyle-list',
|
|
28
|
+
'lrv-u-border-b-1',
|
|
29
|
+
'lrv-u-border-t-1',
|
|
30
|
+
'lrv-u-display-inline-flex',
|
|
31
|
+
'lrv-u-flex-wrap-wrap',
|
|
32
|
+
'lrv-u-padding-tb-075',
|
|
33
|
+
'lrv-a-term-content-grid__fact-list-menu',
|
|
34
|
+
].join( ' ' ),
|
|
35
|
+
fact_list_menu_li_classes: [
|
|
36
|
+
'a-font-secondary',
|
|
37
|
+
'lrv-u-text-transform-uppercase',
|
|
38
|
+
].join( ' ' ),
|
|
39
|
+
fact_list_menu_items,
|
|
40
|
+
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
{% if fact_list_menu_items %}
|
|
2
|
+
<div class="fact-list-menu // {{ fact_list_menu_classes }}">
|
|
3
|
+
<ul class="fact-list-menu-items // {{ fact_list_menu_ul_classes }}">
|
|
4
|
+
{% for item in fact_list_menu_items %}
|
|
5
|
+
<li class="fact-list-menu-item // {{ fact_list_menu_li_classes }}">
|
|
6
|
+
{% include "@larva/components/c-link/c-link.twig" with item %}
|
|
7
|
+
</li>
|
|
8
|
+
{% endfor %}
|
|
9
|
+
</ul>
|
|
10
|
+
</div>
|
|
11
|
+
{% endif %}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
const clonedeep = require( 'lodash.clonedeep' );
|
|
2
|
+
|
|
3
|
+
const c_title = clonedeep(
|
|
4
|
+
require( '@penskemediacorp/larva-patterns/components/c-title/c-title.prototype' )
|
|
5
|
+
);
|
|
6
|
+
|
|
7
|
+
const c_dek = clonedeep(
|
|
8
|
+
require( '@penskemediacorp/larva-patterns/components/c-dek/c-dek.prototype' )
|
|
9
|
+
);
|
|
10
|
+
|
|
11
|
+
const faq_item = clonedeep(
|
|
12
|
+
require( '@penskemediacorp/larva-patterns/objects/o-faq-item/o-faq-item.prototype' )
|
|
13
|
+
);
|
|
14
|
+
|
|
15
|
+
c_title.c_title_classes = 'lrv-u-text-align-center lrv-u-padding-tb-075 lrv-u-border-t-1 lrv-u-border-b-1';
|
|
16
|
+
c_title.c_title_url = '';
|
|
17
|
+
c_dek.c_dek_classes = 'lrv-u-padding-b-150 lrv-u-margin-t-150 lrv-u-border-b-1';
|
|
18
|
+
|
|
19
|
+
const faq_items = [
|
|
20
|
+
faq_item,
|
|
21
|
+
faq_item,
|
|
22
|
+
faq_item,
|
|
23
|
+
faq_item,
|
|
24
|
+
];
|
|
25
|
+
|
|
26
|
+
module.exports = {
|
|
27
|
+
c_title,
|
|
28
|
+
c_dek,
|
|
29
|
+
faq_items,
|
|
30
|
+
};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<div class="faq // {{ faq_classes }}">
|
|
2
|
+
<div class="{{ faq_banner_classes }}">
|
|
3
|
+
<div class="faq-title {{ faq_title_classes }}">
|
|
4
|
+
{% if c_title %}
|
|
5
|
+
{% include "@larva/components/c-title/c-title.twig" with c_title %}
|
|
6
|
+
{% endif %}
|
|
7
|
+
{% if c_dek %}
|
|
8
|
+
{% include "@larva/components/c-dek/c-dek.twig" with c_dek %}
|
|
9
|
+
{% endif %}
|
|
10
|
+
</div>
|
|
11
|
+
</div>
|
|
12
|
+
<div class="{{ faq_items_classes }}">
|
|
13
|
+
{% for item in faq_items %}
|
|
14
|
+
{% include "@larva/objects/o-faq-item/o-faq-item.twig" with item %}
|
|
15
|
+
{% endfor %}
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|
|
@@ -6,9 +6,10 @@ const o_email_capture_form_minimal = clonedeep(
|
|
|
6
6
|
const c_title = clonedeep(
|
|
7
7
|
require( '../../components/c-title/c-title.prototype' )
|
|
8
8
|
);
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
);
|
|
9
|
+
|
|
10
|
+
const c_tagline_prototype = require( '../../components/c-tagline/c-tagline.prototype' );
|
|
11
|
+
const c_tagline = clonedeep( c_tagline_prototype );
|
|
12
|
+
const c_tagline_terms = clonedeep( c_tagline_prototype );
|
|
12
13
|
|
|
13
14
|
c_title.c_title_url = false;
|
|
14
15
|
c_title.c_title_text = 'Stay In The Know';
|
|
@@ -19,6 +20,8 @@ c_tagline.c_tagline_text = 'Sign up for our daily newsletter';
|
|
|
19
20
|
c_tagline.c_tagline_classes =
|
|
20
21
|
'lrv-u-font-size-14 u-font-style-italic lrv-u-font-family-basic lrv-u-text-align-center';
|
|
21
22
|
|
|
23
|
+
c_tagline_terms.c_tagline_text = '';
|
|
24
|
+
|
|
22
25
|
o_email_capture_form_minimal.c_button.c_button_classes += ' lrv-a-icon-invert';
|
|
23
26
|
|
|
24
27
|
module.exports = {
|
|
@@ -26,5 +29,6 @@ module.exports = {
|
|
|
26
29
|
'lrv-u-text-align-center lrv-u-color-white lrv-u-background-color-black lrv-u-flex lrv-u-flex-direction-column lrv-u-align-items-center',
|
|
27
30
|
c_title,
|
|
28
31
|
c_tagline,
|
|
32
|
+
c_tagline_terms,
|
|
29
33
|
o_email_capture_form: o_email_capture_form_minimal,
|
|
30
34
|
};
|
|
@@ -11,7 +11,7 @@ const c_tagline = clonedeep(
|
|
|
11
11
|
);
|
|
12
12
|
|
|
13
13
|
c_button.c_button_classes +=
|
|
14
|
-
'lrv-u-
|
|
14
|
+
'lrv-u-font-size-12 lrv-u-text-transform-uppercase lrv-u-font-weight-bold lrv-u-color-white lrv-u-color-grey-light:hover lrv-u-background-color-black lrv-a-icon-after lrv-a-icon-arrow-right lrv-a-icon-invert';
|
|
15
15
|
c_button.c_button_text = 'Send Us a Tip';
|
|
16
16
|
c_button.c_button_url = 'https://google.com';
|
|
17
17
|
c_button.c_button_inner_classes =
|
|
@@ -21,7 +21,7 @@ c_title.c_title_classes = 'lrv-u-margin-b-025 lrv-u-font-family-primary';
|
|
|
21
21
|
c_title.c_title_text = 'Have a Tip?';
|
|
22
22
|
|
|
23
23
|
c_tagline.c_tagline_classes =
|
|
24
|
-
'lrv-u-font-size-14 u-font-
|
|
24
|
+
'lrv-u-font-size-14 lrv-u-font-family-basic u-font-style-italic';
|
|
25
25
|
c_tagline.c_tagline_text =
|
|
26
26
|
'We want to hear from you! Send us a tip using our anonymous form.';
|
|
27
27
|
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
{% if heading_markup %}
|
|
2
|
-
<h{{ heading_level_text }} class="heading larva // {{ heading_classes }} {{ heading_typography_class }} {{ heading_color_class }} {{ heading_background_color_class }} {{ heading_text_align_class }}">{{ heading_markup }}</h{{ heading_level_text }}>
|
|
2
|
+
<h{{ heading_level_text }} class="heading larva // {{ heading_classes }} {{ heading_animation_class }} {{ heading_typography_class }} {{ heading_color_class }} {{ heading_background_color_class }} {{ heading_text_align_class }}">{{ heading_markup }}</h{{ heading_level_text }}>
|
|
3
3
|
{% endif %}
|