@penskemediacorp/larva-patterns 1.12.0 → 1.16.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.
Files changed (14) hide show
  1. package/modules/pmc-footer/pmc-footer.prototype.js +3 -1
  2. package/modules/profile-block/README.md +3 -0
  3. package/modules/profile-block/profile-block.horizontal.js +9 -0
  4. package/modules/profile-block/profile-block.prototype.js +39 -0
  5. package/modules/profile-block/profile-block.twig +36 -0
  6. package/modules/secondary-stories/secondary-stories.prototype.js +2 -2
  7. package/modules/separator/separator.double-line.js +7 -0
  8. package/modules/separator/separator.thick-double-line.js +7 -0
  9. package/modules/video-slider/video-slider.prototype.js +18 -0
  10. package/modules/video-slider/video-slider.twig +9 -0
  11. package/objects/o-nav/o-nav.twig +3 -0
  12. package/objects/o-video-card/o-video-card.prototype.js +1 -0
  13. package/objects/o-video-card/o-video-card.twig +4 -0
  14. package/package.json +5 -5
package/modules/pmc-footer/pmc-footer.prototype.js CHANGED
@@ -34,10 +34,12 @@ data.brands.forEach( ( brand ) => {
34
34
  });
35
35
 
36
36
  o_nav.o_nav_title_id_attr = 'pmc-footer';
37
- o_nav.o_nav_classes = 'lrv-u-text-transform-uppercase lrv-u-font-size-12 lrv-u-border-a-1 lrv-u-border-color-grey-light lrv-u-flex@tablet lrv-js-MobileHeightToggle lrv-a-hover-dropup@tablet';
37
+ o_nav.o_nav_classes = 'lrv-u-text-transform-uppercase lrv-u-font-size-12 lrv-u-border-a-1 lrv-u-border-color-grey-light lrv-u-flex@tablet lrv-js-MobileHeightToggle lrv-a-hover-dropup@tablet lrv-js-Navigable';
38
38
  o_nav.o_nav_title_classes = 'lrv-u-padding-lr-1 lrv-u-margin-tb-00 lrv-u-padding-t-1 lrv-u-padding-t-050@tablet lrv-u-padding-b-050 lrv-u-width-100p lrv-a-icon-after lrv-a-icon-arrow-down lrv-a-icon-after:margin-l-auto lrv-u-cursor-pointer lrv-js-MobileHeightToggle-trigger lrv-a-hover-dropup-trigger@tablet';
39
39
  o_nav.o_nav_list_classes += ' lrv-u-background-color-white lrv-u-padding-b-050 lrv-js-MobileHeightToggle-target lrv-a-hover-dropup-target@tablet lrv-u-box-shadow-medium@tablet';
40
40
  o_nav.o_nav_list_item_classes = 'lrv-u-color-grey-medium-dark';
41
+ o_nav.o_nav_tab_index_attr = true;
42
+ o_nav.o_nav_tab_index_attr_val = '0';
41
43
 
42
44
  module.exports = {
43
45
  c_icon: c_icon,
package/modules/profile-block/README.md ADDED
@@ -0,0 +1,3 @@
1
+ # PMC Profile Block
2
+
3
+ Larva pattern used for Gutenberg profile block.
package/modules/profile-block/profile-block.horizontal.js ADDED
@@ -0,0 +1,9 @@
1
+ const clonedeep = require( 'lodash.clonedeep' );
2
+
3
+ const profile_block_horizontal = clonedeep( require( './profile-block.prototype' ) );
4
+
5
+ profile_block_horizontal.profile_block_classes = 'lrv-u-flex@tablet lrv-u-align-items-center';
6
+ profile_block_horizontal.profile_block_image_classes = 'lrv-u-margin-a-00@tablet lrv-u-width-25p@tablet';
7
+ profile_block_horizontal.profile_block_detail_classes = 'lrv-u-text-align-center@mobile-max lrv-u-width-75p@tablet lrv-u-margin-l-2@tablet';
8
+
9
+ module.exports = profile_block_horizontal;
package/modules/profile-block/profile-block.prototype.js ADDED
@@ -0,0 +1,39 @@
1
+ const clonedeep = require( 'lodash.clonedeep' );
2
+
3
+ const c_lazy_image = clonedeep( require( '../../components/c-lazy-image/c-lazy-image.prototype' ) );
4
+ const c_title = clonedeep( require( '../../components/c-title/c-title.prototype' ) );
5
+ const c_tagline = clonedeep( require( '../../components/c-tagline/c-tagline.prototype' ) );
6
+ const c_dek = clonedeep( require( '../../components/c-dek/c-dek.prototype' ) );
7
+ const c_button = clonedeep( require( '../../components/c-button/c-button.prototype' ) );
8
+
9
+ c_lazy_image.c_lazy_image_classes += ' ';
10
+ c_lazy_image.c_lazy_image_img_classes += ' lrv-u-border-radius-50p';
11
+ c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-1x1';
12
+
13
+
14
+ c_title.c_title_classes = 'lrv-a-font-primary-l lrv-u-margin-b-1 lrv-u-margin-t-150';
15
+ c_title.c_title_text = 'Debra and Leon Black';
16
+ c_title.c_title_url = false;
17
+
18
+ c_tagline.c_tagline_text = 'Title Here';
19
+ c_tagline.c_tagline_classes = 'lrv-a-font-secondary-s lrv-u-margin-b-150 lrv-u-text-transform-uppercase';
20
+
21
+ c_dek.c_dek_classes = 'lrv-u-margin-t-00 lrv-u-margin-b-150';
22
+ c_dek.c_dek_text = 'Massa tincidunt dui ut ornare lectus sit. Dolor purus non enim praesent elementum facilisis leo. Aliquet eget sit amet tellus cras adipiscing enim eu. ';
23
+
24
+ c_button.c_button_text = 'View Profile';
25
+ c_button.c_button_classes += ' lrv-u-display-inline-block lrv-u-text-transform-uppercase lrv-u-font-size-14 lrv-u-background-color-black lrv-u-padding-lr-2 lrv-u-padding-tb-050 lrv-u-color-white lrv-u-color-grey-light:hover';
26
+ c_button.c_button_url = '#';
27
+ c_button.c_button_inner_classes = 'lrv-u-padding-lr-1@tablet';
28
+
29
+ module.exports = {
30
+ profile_block_classes: 'lrv-u-max-width-80p lrv-u-margin-lr-auto',
31
+ profile_block_image_classes: '',
32
+ profile_block_detail_classes: 'lrv-u-text-align-center',
33
+ profile_block_c_button_classes: '',
34
+ c_button,
35
+ c_lazy_image,
36
+ c_title,
37
+ c_tagline,
38
+ c_dek,
39
+ }
package/modules/profile-block/profile-block.twig ADDED
@@ -0,0 +1,36 @@
1
+ <div class="profile-block // {{ profile_block_classes }} ">
2
+
3
+ <div class="profile-block-image // {{ profile_block_image_classes }}">
4
+ {% if c_lazy_image %}
5
+ {% include "@larva/components/c-lazy-image/c-lazy-image.twig" with c_lazy_image %}
6
+ {% endif %}
7
+ </div>
8
+
9
+ <div class="profile-block-details // {{ profile_block_detail_classes }}">
10
+ {% if c_title %}
11
+ {% include "@larva/components/c-title/c-title.twig" with c_title %}
12
+ {% endif %}
13
+
14
+ {% if c_tagline %}
15
+ {% include "@larva/components/c-tagline/c-tagline.twig" with c_tagline %}
16
+ {% endif %}
17
+
18
+ {% if c_tagline_second %}
19
+ {% include "@larva/components/c-tagline/c-tagline.twig" with c_tagline_second %}
20
+ {% endif %}
21
+
22
+ {% if c_dek %}
23
+ {% include "@larva/components/c-dek/c-dek.twig" with c_dek %}
24
+ {% endif %}
25
+
26
+ {% if o_social_list %}
27
+ {% include "@larva/objects/o-social-list/o-social-list.twig" with o_social_list %}
28
+ {% endif %}
29
+
30
+ {% if c_button %}
31
+ <div class="{{ profile_block_c_button_classes }}">
32
+ {% include "@larva/components/c-button/c-button.twig" with c_button %}
33
+ </div>
34
+ {% endif %}
35
+ </div>
36
+ </div>
package/modules/secondary-stories/secondary-stories.prototype.js CHANGED
@@ -87,9 +87,9 @@ o_card_5.article_kicker.article_kicker_text = 'INSIDE LOOK';
87
87
  o_card_5.c_title.c_title_text = '40 Watt Sun Raise the Emotional Stakes While Turning Down the Volume on New Chamber-Folk Epic';
88
88
  o_card_5.o_card_classes = 'lrv-u-padding-r-2@tablet lrv-u-padding-b-150@mobile-max lrv-u-flex-basis-50p lrv-u-border-r-1@tablet ';
89
89
  o_card_5.article_kicker_outer_classes = ' lrv-a-glue-parent lrv-u-background-color-white lrv-u-padding-b-1 lrv-u-padding-r-1 lrv-u-padding-t-1';
90
- o_card_5.article_kicker.article_kicker_classes += 'lrv-a-font-basic-xs ';
90
+ o_card_5.article_kicker.article_kicker_classes += ' lrv-a-font-basic-xs ';
91
91
  o_card_5.o_card_content_classes = ' lrv-u-align-items-start lrv-u-flex lrv-u-flex-basis-100p@desktop-xl-max lrv-u-flex-direction-column lrv-u-padding-l-150@mobile-max lrv-u-padding-r-150@mobile-max';
92
- o_card_5.c_title.c_title_classes = 'lrv-u-padding-t-00@desktop-xl lrv-u-padding-b-075 lrv-u-padding-t-00@mobile-max lrv-a-font-primary-xl lrv-u-padding-t-025';
92
+ o_card_5.c_title.c_title_classes = 'lrv-u-padding-t-00@desktop-xl lrv-u-padding-b-075 lrv-u-padding-t-1@mobile-max lrv-a-font-primary-xl lrv-u-padding-t-025';
93
93
  o_card_5.o_card_image_wrap_classes = 'lrv-u-flex-basis-100p@desktop-xl-max ';
94
94
 
95
95
  const o_card_6 = clonedeep(o_card_prototype);
package/modules/separator/separator.double-line.js ADDED
@@ -0,0 +1,7 @@
1
+ const clonedeep = require( 'lodash.clonedeep' );
2
+
3
+ const separator = clonedeep( require( './separator.prototype' ) );
4
+
5
+ separator.separator_classes = 'lrv-u-border-b-1 lrv-u-border-t-1 lrv-u-height-8';
6
+
7
+ module.exports = separator;
package/modules/separator/separator.thick-double-line.js ADDED
@@ -0,0 +1,7 @@
1
+ const clonedeep = require( 'lodash.clonedeep' );
2
+
3
+ const separator = clonedeep( require( './separator.prototype' ) );
4
+
5
+ separator.separator_classes = 'lrv-u-border-b-1 lrv-u-border-t-20 lrv-u-height-37';
6
+
7
+ module.exports = separator;
package/modules/video-slider/video-slider.prototype.js ADDED
@@ -0,0 +1,18 @@
1
+ const clonedeep = require( 'lodash.clonedeep' );
2
+
3
+ const c_title = clonedeep( require( '@penskemediacorp/larva-patterns/components/c-heading/c-heading.prototype' ) );
4
+ const c_dek = clonedeep( require( '@penskemediacorp/larva-patterns/components/c-dek/c-dek.prototype' ) );
5
+ const o_video_card = clonedeep(
6
+ require('@penskemediacorp/larva-patterns/objects/o-video-card/o-video-card.prototype')
7
+ );
8
+
9
+ c_title.c_title_classes = 'lrv-a-unstyle-inner-links lrv-a-font-primary-xxl';
10
+
11
+ o_video_card.c_dek = c_dek;
12
+ o_video_card.c_title = c_title;
13
+
14
+ module.exports = {
15
+ video_slider_classes: 'js-Flickity js-Flickity--100p',
16
+ video_slider_slide_inner_classes: 'lrv-a-glue-parent',
17
+ o_video_card_items: [o_video_card, o_video_card, o_video_card],
18
+ };
package/modules/video-slider/video-slider.twig ADDED
@@ -0,0 +1,9 @@
1
+ <div class="video-slider {{video_slider_classes}}">
2
+ {% for item in o_video_card_items %}
3
+ <div class="js-Flickity-cell" data-video-showcase>
4
+ <div class="video-sider__slide-inner {{video_slider_slide_inner_classes}}">
5
+ {% include "@larva/objects/o-video-card/o-video-card.twig" with item %}
6
+ </div>
7
+ </div>
8
+ {% endfor %}
9
+ </div>
package/objects/o-nav/o-nav.twig CHANGED
@@ -10,6 +10,9 @@
10
10
  {% if o_nav_aria_labelledby_attr %}
11
11
  aria-labelledby="{{ o_nav_aria_labelledby_attr }}"
12
12
  {% endif %}
13
+ {% if o_nav_tab_index_attr %}
14
+ tabindex="{{ o_nav_tab_index_attr_val }}"
15
+ {% endif %}
13
16
  >
14
17
 
15
18
  {% if o_nav_title_text %}
package/objects/o-video-card/o-video-card.prototype.js CHANGED
@@ -42,4 +42,5 @@ module.exports = {
42
42
  o_video_card_link_classes: 'lrv-u-width-100p',
43
43
  o_video_card_permalink_classes: 'u-margin-r-050@mobile-max',
44
44
  c_play_icon,
45
+ c_title: false,
45
46
  };
package/objects/o-video-card/o-video-card.twig CHANGED
@@ -53,6 +53,10 @@
53
53
  {% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
54
54
  {% endif %}
55
55
 
56
+ {% if c_title %}
57
+ {% include "@larva/components/c-heading/c-heading.twig" with c_title %}
58
+ {% endif %}
59
+
56
60
  {% if c_dek %}
57
61
  {% include "@larva/components/c-dek/c-dek.twig" with c_dek %}
58
62
  {% endif %}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@penskemediacorp/larva-patterns",
3
- "version": "1.12.0",
3
+ "version": "1.16.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.11.0",
24
- "@penskemediacorp/larva-js": "^1.10.0",
25
- "@penskemediacorp/larva-svg": "^1.10.0",
23
+ "@penskemediacorp/larva-css": "^1.16.0",
24
+ "@penskemediacorp/larva-js": "^1.15.0",
25
+ "@penskemediacorp/larva-svg": "^1.14.0",
26
26
  "lodash.clonedeep": "^4.5.0"
27
27
  },
28
- "gitHead": "095df04802953f0c9efdc467043c75896613f9ff"
28
+ "gitHead": "b2f81b28b684d80f695da1dfddb04d9f97a04bc7"
29
29
  }