@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.
Files changed (79) hide show
  1. package/algorithms/a-term-content-grid/README.md +1 -0
  2. package/algorithms/a-term-content-grid/a-term-content-grid.html +27 -0
  3. package/algorithms/a-term-content-grid/a-term-content-grid.prototype.js +11 -0
  4. package/components/c-nav-link/c-nav-link.twig +6 -0
  5. package/components/c-timestamp/c-timestamp.twig +3 -0
  6. package/components/c-title/c-title.twig +5 -1
  7. package/modules/article-timestamp/article-timestamp.prototype.js +1 -1
  8. package/modules/author/author.prototype.js +3 -3
  9. package/modules/author-blurb/author-blurb.prototype.js +3 -3
  10. package/modules/author-details/author-details.prototype.js +5 -5
  11. package/modules/badge/badge.prototype.js +1 -1
  12. package/modules/banner/banner.twig +12 -4
  13. package/modules/brands-most-popular/brands-most-popular.prototype.js +1 -0
  14. package/modules/breaking-news/breaking-news.prototype.js +2 -2
  15. package/modules/buy-now/buy-now.prototype.js +1 -1
  16. package/modules/container/container.prototype.js +1 -1
  17. package/modules/content-showcase/content-showcase.prototype.js +3 -3
  18. package/modules/content-showcase/content-showcase.the-moth.js +5 -5
  19. package/modules/fact-list/README.md +1 -0
  20. package/modules/fact-list/fact-list.prototype.js +21 -0
  21. package/modules/fact-list/fact-list.twig +14 -0
  22. package/modules/fact-list-item/README.md +1 -0
  23. package/modules/fact-list-item/fact-list-item.prototype.js +28 -0
  24. package/modules/fact-list-item/fact-list-item.thumbnail.js +13 -0
  25. package/modules/fact-list-item/fact-list-item.twig +17 -0
  26. package/modules/fact-list-menu/README.md +1 -0
  27. package/modules/fact-list-menu/fact-list-menu.prototype.js +40 -0
  28. package/modules/fact-list-menu/fact-list-menu.twig +11 -0
  29. package/modules/faq/faq.prototype.js +30 -0
  30. package/modules/faq/faq.twig +17 -0
  31. package/modules/footer-newsletter/footer-newsletter.prototype.js +7 -3
  32. package/modules/footer-tip/footer-tip.prototype.js +2 -2
  33. package/modules/heading/heading.twig +1 -1
  34. package/modules/how-we-test-products/how-we-test-products.prototype.js +50 -0
  35. package/modules/how-we-test-products/how-we-test-products.twig +19 -0
  36. package/modules/mega-menu-footer/mega-menu-footer.prototype.js +7 -0
  37. package/modules/mega-menu-footer/mega-menu-footer.twig +26 -4
  38. package/modules/mega-menu-item/mega-menu-item.twig +8 -2
  39. package/modules/multiple-products/multiple-products.prototype.js +20 -0
  40. package/modules/multiple-products/multiple-products.twig +14 -0
  41. package/modules/newsletter/newsletter.prototype.js +1 -1
  42. package/modules/newsletter-cta/newsletter-cta.prototype.js +1 -0
  43. package/modules/newsletter-cta/newsletter-cta.twig +1 -1
  44. package/modules/newswire/newswire.prototype.js +1 -0
  45. package/modules/page-404/page-404.smart.js +60 -0
  46. package/modules/page-404/page-404.twig +16 -0
  47. package/modules/paragraph/paragraph.prototype.js +1 -0
  48. package/modules/paragraph/paragraph.twig +6 -1
  49. package/modules/post-content-image/post-content-image.twig +1 -1
  50. package/modules/product-card/product-card.prototype.js +41 -0
  51. package/modules/product-card/product-card.twig +57 -0
  52. package/modules/product-grid/product-grid.prototype.js +46 -0
  53. package/modules/product-grid/product-grid.twig +21 -0
  54. package/modules/pros-and-cons/pros-and-cons.prototype.js +15 -0
  55. package/modules/pros-and-cons/pros-and-cons.twig +12 -0
  56. package/modules/section-heading/section-heading.h2.js +1 -1
  57. package/modules/section-heading/section-heading.h3.js +1 -1
  58. package/modules/separator/separator.prototype.js +1 -0
  59. package/modules/separator/separator.twig +1 -1
  60. package/modules/table-of-contents/table-of-contents.prototype.js +38 -0
  61. package/modules/table-of-contents/table-of-contents.twig +44 -0
  62. package/modules/tag-list/README.md +1 -0
  63. package/modules/tag-list/tag-list.prototype.js +42 -0
  64. package/modules/tag-list/tag-list.thumbnail.js +49 -0
  65. package/modules/tag-list/tag-list.twig +16 -0
  66. package/modules/term-content-top/README.md +1 -0
  67. package/modules/term-content-top/term-content-top.heading-tags.js +14 -0
  68. package/modules/term-content-top/term-content-top.prototype.js +73 -0
  69. package/modules/term-content-top/term-content-top.twig +22 -0
  70. package/objects/o-card/o-card.twig +5 -1
  71. package/objects/o-faq-item/o-faq-item.prototype.js +18 -0
  72. package/objects/o-faq-item/o-faq-item.twig +8 -0
  73. package/objects/o-multiple-product-item/o-multiple-product-item.prototype.js +18 -0
  74. package/objects/o-multiple-product-item/o-multiple-product-item.twig +25 -0
  75. package/objects/o-product-card/o-product-card.primary.js +9 -0
  76. package/objects/o-product-card/o-product-card.prototype.js +60 -0
  77. package/objects/o-product-card/o-product-card.twig +64 -0
  78. package/objects/o-video-card/o-video-card.twig +6 -1
  79. 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 %}
@@ -5,5 +5,8 @@
5
5
  {% endif %}
6
6
  >
7
7
  {{ c_timestamp_text }}
8
+ {% if c_timestamp_markup %}
9
+ {{ c_timestamp_markup|raw }}
10
+ {% endif %}
8
11
 
9
12
  </time>
@@ -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 }}" {{ c_title_link_data_attr }}>
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-font-size-14 lrv-u-text-transform-uppercase lrv-u-color-black lrv-u-display-inline-block';
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-color-black lrv-u-margin-l-auto';
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-margin-r-050 lrv-u-text-transform-uppercase lrv-u-letter-spacing-015 lrv-u-letter-spacing-012@mobile-max';
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-a-unstyle-button lrv-u-display-contents lrv-u-flex lrv-u-align-items-center js-PopOver',
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-margin-b-1 lrv-u-text-transform-uppercase';
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-font-size-14 lrv-u-font-weight-light lrv-u-font-size-16 lrv-u-font-size-18@desktop-xl lrv-u-margin-a-00 lrv-u-padding-t-1 ';
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-color-grey lrv-u-padding-a-025 lrv-u-background-color-white lrv-u-color-grey-dark:hover lrv-u-margin-r-1';
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-font-size-13 lrv-u-font-weight-bold lrv-u-margin-r-auto lrv-u-text-transform-uppercase lrv-u-width-100';
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-border-t-1 lrv-u-width-100p lrv-u-margin-t-075 lrv-u-padding-t-025 ';
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-font-size-13 lrv-u-border-t-1 lrv-u-border-b-1 lrv-u-padding-l-1 lrv-u-padding-t-075 lrv-u-list-style-type-disclosure-closed';
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-a-unstyle-link lrv-u-font-size-10 lrv-u-text-transform-uppercase';
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-padding-lr-125 lrv-u-padding-t-125 lrv-u-padding-b-1 lrv-u-width-215 lrv-u-flex lrv-u-flex-wrap-wrap lrv-u-background-color-white lrv-u-border-a-2 lrv-a-glue-parent lrv-a-icon-after-arrow-top-left lrv-u-margin-t-1',
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 lrv-u-padding-a-025';
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
- <div class="banner__img">
2
+
3
3
  {% if c_lazy_image %}
4
- {% include "@larva/components/c-lazy-image/c-lazy-image.twig" with c_lazy_image %}
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
- </div>
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
- <h1 class="lrv-a-screen-reader-only">{{ screen_reader_text }}</h1>
16
+ <span class="lrv-a-screen-reader-only">{{ screen_reader_text }}</span>
9
17
  {% endif %}
10
18
  </div>
@@ -33,6 +33,7 @@ o_card.c_span = false;
33
33
  o_card.c_svg = c_svg;
34
34
  o_card.c_title = c_title;
35
35
  o_card.c_timestamp = false;
36
+ o_card.o_card_link_rel_attribute = 'nofollow';
36
37
 
37
38
  module.exports = {
38
39
  brands_most_popular_classes: 'lrv-a-wrapper lrv-u-margin-b-150',
@@ -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-a-font-secondary-bold-l lrv-u-margin-r-1 lrv-u-text-transform-uppercase lrv-u-margin-b-050@mobile-max';
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-color-white lrv-u-cursor-pointer lrv-u-width-16 lrv-u-height-16 lrv-u-color-white:hover lrv-u-margin-l-auto';
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-font-size-14 lrv-u-font-weight-bold lrv-u-text-transform-uppercase 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-background-color-white lrv-u-color-black lrv-u-border-color-currentColor';
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-a-font-body-m lrv-u-margin-lr-auto',
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-color-brand-primary:hover lrv-u-flex-basis-60p@desktop lrv-u-flex-basis-60p@desktop-xl lrv-u-flex-basis-55p@mobile-max';
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-font-weight-normal lrv-u-margin-tb-1';
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-width-100p lrv-u-padding-lr-125@mobile-max',
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-padding-tb-00@mobile-max lrv-u-flex-shrink-0@mobile-max';
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-margin-l-1 lrv-u-color-brand-primary:hover lrv-u-flex-basis-60p@desktop lrv-u-flex-basis-60p@desktop-xl lrv-u-flex-basis-55p@mobile-max lrv-u-color-black';
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-a-font-body-l lrv-u-text-decoration-underline:hover lrv-u-margin-b-00 lrv-u-margin-t-050 lrv-u-line-height-copy';
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 lrv-u-position-relative lrv-u-padding-b-050';
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-padding-r-2@mobile-max lrv-u-flex-shrink-0@mobile-max lrv-u-border-b-1 lrv-u-border-t-1 lrv-u-flex lrv-u-margin-t-025 lrv-u-padding-lr-125@mobile-max lrv-u-padding-tb-150 lrv-u-width-100p';
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
- const c_tagline = clonedeep(
10
- require( '../../components/c-tagline/c-tagline.prototype' )
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-color-white lrv-u-color-grey-light:hover lrv-u-background-color-black lrv-u-font-size-12 lrv-u-font-weight-bold lrv-u-text-transform-uppercase lrv-a-icon-after lrv-a-icon-arrow-right lrv-a-icon-invert';
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-style-italic lrv-u-font-family-basic';
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 %}