@penskemediacorp/larva-patterns 0.5.8 → 0.6.3
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-lazy-image/c-lazy-image.prototype.js +1 -0
- package/components/c-lazy-image/c-lazy-image.twig +5 -1
- package/components/c-svg/c-svg.prototype.js +4 -0
- package/components/c-svg/c-svg.twig +3 -0
- package/modules/brands-most-popular/brands-most-popular.prototype.js +40 -0
- package/modules/brands-most-popular/brands-most-popular.twig +11 -0
- package/modules/content-showcase/content-showcase.prototype.js +29 -0
- package/modules/content-showcase/content-showcase.twig +7 -0
- package/modules/injected-related-content/injected-related-content.prototype.js +3 -1
- package/modules/newswire/newswire.prototype.js +7 -1
- package/modules/newswire/newswire.twig +3 -3
- package/modules/paragraph/paragraph.twig +1 -1
- package/modules/story-grid/story-grid.river.js +4 -0
- package/modules/story-grid/story-grid.twig +5 -2
- package/objects/o-card/o-card.prototype.js +1 -0
- package/objects/o-card/o-card.twig +4 -0
- package/package.json +5 -5
|
@@ -4,6 +4,7 @@ module.exports = {
|
|
|
4
4
|
c_lazy_image_link_classes: 'lrv-a-unstyle-link',
|
|
5
5
|
c_lazy_image_crop_class: 'lrv-a-crop-16x9',
|
|
6
6
|
c_lazy_image_crop_style_attr: false,
|
|
7
|
+
c_lazy_image_link_tab_index_attr: false,
|
|
7
8
|
c_lazy_image_alt_attr: 'Lazy loaded image',
|
|
8
9
|
c_lazy_image_src_url: 'https://farm5.staticflickr.com/4078/5441060528_31db7838ba_z.jpg',
|
|
9
10
|
c_lazy_image_placeholder_url: 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==',
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
<div class="c-lazy-image {{ modifier_class }} {{ c_lazy_image_classes }}">
|
|
2
2
|
{% if c_lazy_image_link_url %}
|
|
3
|
-
<a href="{{ c_lazy_image_link_url }}" class="c-lazy-image__link {{ c_lazy_image_link_classes }}"
|
|
3
|
+
<a href="{{ c_lazy_image_link_url }}" class="c-lazy-image__link {{ c_lazy_image_link_classes }}"
|
|
4
|
+
{% if c_lazy_image_link_tab_index_attr %}
|
|
5
|
+
tabindex="{{ c_lazy_image_link_tab_index_attr }}"
|
|
6
|
+
{% endif %}
|
|
7
|
+
>
|
|
4
8
|
{% endif %}
|
|
5
9
|
|
|
6
10
|
{% if c_lazy_image_crop_class %}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
const clonedeep = require( 'lodash.clonedeep' );
|
|
2
|
+
|
|
3
|
+
const c_heading_prototype = require( '../../components/c-heading/c-heading.prototype' );
|
|
4
|
+
const o_card_prototype = require( '../../objects/o-card/o-card.prototype' );
|
|
5
|
+
const c_title_prototype = require( '../../components/c-title/c-title.prototype' );
|
|
6
|
+
const c_svg_prototype = require( '../../components/c-svg/c-svg.prototype' );
|
|
7
|
+
const c_span_prototype = require( '../../components/c-span/c-span.prototype' );
|
|
8
|
+
|
|
9
|
+
const c_heading = clonedeep( c_heading_prototype );
|
|
10
|
+
const o_card = clonedeep( o_card_prototype );
|
|
11
|
+
const c_title = clonedeep( c_title_prototype );
|
|
12
|
+
const c_svg = clonedeep( c_svg_prototype );
|
|
13
|
+
const c_span = clonedeep( c_span_prototype );
|
|
14
|
+
|
|
15
|
+
c_heading.c_heading_text = 'Most Popular';
|
|
16
|
+
|
|
17
|
+
c_svg.c_svg_classes = 'lrv-u-height-16 lrv-u-color-black';
|
|
18
|
+
c_svg.c_svg_name = 'brand-logo';
|
|
19
|
+
|
|
20
|
+
c_title.c_title_text = 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi expedita pariatur.';
|
|
21
|
+
c_title.c_title_classes += ' lrv-u-margin-b-075';
|
|
22
|
+
c_title.c_title_url = false;
|
|
23
|
+
|
|
24
|
+
o_card.o_card_classes = 'lrv-u-flex lrv-u-height-100p lrv-u-color-brand-primary:hover';
|
|
25
|
+
o_card.o_card_link_url = '#';
|
|
26
|
+
o_card.o_card_link_classes = 'lrv-a-unstyle-link';
|
|
27
|
+
o_card.o_card_content_classes = 'lrv-u-flex lrv-u-flex-direction-column';
|
|
28
|
+
o_card.o_card_image_wrap_classes = '';
|
|
29
|
+
o_card.c_lazy_image = false;
|
|
30
|
+
o_card.c_span = false;
|
|
31
|
+
o_card.c_svg = c_svg;
|
|
32
|
+
o_card.c_title = c_title;
|
|
33
|
+
o_card.c_timestamp = false;
|
|
34
|
+
|
|
35
|
+
module.exports = {
|
|
36
|
+
brands_most_popular_classes: 'lrv-a-wrapper lrv-u-margin-b-150',
|
|
37
|
+
brands_most_popular_items_wrapper_classes: '',
|
|
38
|
+
c_heading: c_heading,
|
|
39
|
+
popular_items: [ o_card, o_card, o_card, o_card ],
|
|
40
|
+
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
<section class="brands-most-popular // {{brands_most_popular_classes}}">
|
|
2
|
+
{% if c_heading %}
|
|
3
|
+
{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
|
|
4
|
+
{% endif %}
|
|
5
|
+
|
|
6
|
+
<div class="{{ brands_most_popular_items_wrapper_classes }}">
|
|
7
|
+
{% for item in popular_items %}
|
|
8
|
+
{% include "@larva/objects/o-card/o-card.twig" with item %}
|
|
9
|
+
{% endfor %}
|
|
10
|
+
</div>
|
|
11
|
+
</section>
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
const clonedeep = require( 'lodash.clonedeep' );
|
|
2
|
+
|
|
3
|
+
const o_card = clonedeep( require( '@penskemediacorp/larva-patterns/objects/o-card/o-card.prototype' ) );
|
|
4
|
+
const c_dek = clonedeep( require( '@penskemediacorp/larva-patterns/components/c-dek/c-dek.prototype' ) );
|
|
5
|
+
|
|
6
|
+
o_card.o_card_classes = 'lrv-u-display-inline-flex lrv-u-flex-basis-100p@desktop-xl lrv-u-flex-basis-100p@desktop lrv-u-padding-tb-075@mobile-max';
|
|
7
|
+
o_card.o_card_link_classes = 'lrv-u-flex';
|
|
8
|
+
o_card.o_card_link_url = '#';
|
|
9
|
+
o_card.o_card_image_wrap_classes = 'lrv-u-flex-basis-40p@desktop lrv-u-flex-basis-40p@desktop-xl lrv-u-flex-basis-25p@mobile-max';
|
|
10
|
+
o_card.o_card_content_classes = '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';
|
|
11
|
+
|
|
12
|
+
o_card.c_lazy_image.c_lazy_image_link_url = '';
|
|
13
|
+
o_card.c_lazy_image.c_lazy_image_classes = 'lrv-u-margin-l-auto';
|
|
14
|
+
o_card.c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-1x1';
|
|
15
|
+
|
|
16
|
+
o_card.o_span_group = false;
|
|
17
|
+
o_card.c_span = false;
|
|
18
|
+
o_card.c_title.c_title_url = '';
|
|
19
|
+
o_card.c_timestamp = false;
|
|
20
|
+
o_card.c_tagline = false;
|
|
21
|
+
o_card.o_author = false;
|
|
22
|
+
|
|
23
|
+
o_card.c_dek = c_dek;
|
|
24
|
+
o_card.c_dek.c_dek_text = 'Perfection is rarely achieved in movies, but this heaven-sent concert doc hits the sweet spot.';
|
|
25
|
+
|
|
26
|
+
module.exports = {
|
|
27
|
+
content_showcase_items_classes: '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',
|
|
28
|
+
content_showcase_items: [ o_card, o_card, o_card ]
|
|
29
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
<div class="content-showcase larva // {{ content_showcase_classes }}">
|
|
2
|
+
<div class="content-showcase-items // {{ content_showcase_items_classes }}">
|
|
3
|
+
{% for item in content_showcase_items %}
|
|
4
|
+
{% include "@larva/objects/o-card/o-card.twig" with item %}
|
|
5
|
+
{% endfor %}
|
|
6
|
+
</div>
|
|
7
|
+
</div>
|
|
@@ -11,7 +11,7 @@ const c_title = clonedeep(c_title_prototype);
|
|
|
11
11
|
|
|
12
12
|
c_title.c_title_text = 'Chronixx Says Some Dancehall Lyrics Are ‘Embarrassing’, Artists Should Stop Calling Him For Features';
|
|
13
13
|
c_title.c_title_classes = 'lrv-a-font-primary-xs lrv-u-color-black lrv-u-padding-t-125';
|
|
14
|
-
c_title.c_title_link_classes = 'lrv-a-font-primary-xs lrv-u-color-black lrv-a-truncate-ellipsis-5line@desktop-
|
|
14
|
+
c_title.c_title_link_classes = 'lrv-a-font-primary-xs lrv-u-color-black lrv-a-truncate-ellipsis-4line@mobile-max lrv-a-truncate-ellipsis-5line@tablet-desktop-only lrv-a-truncate-ellipsis-3line@desktop-xl';
|
|
15
15
|
c_title.c_title_url = '#';
|
|
16
16
|
|
|
17
17
|
const c_lazy_image_prototype = require('../../components/c-lazy-image/c-lazy-image.prototype.js');
|
|
@@ -31,6 +31,7 @@ o_card_first.c_title.c_title_url = '#';
|
|
|
31
31
|
o_card_first.c_lazy_image = false;
|
|
32
32
|
o_card_first.c_span = false;
|
|
33
33
|
o_card_first.c_timestamp = false;
|
|
34
|
+
o_card_first.o_card_tag_text = 'div';
|
|
34
35
|
|
|
35
36
|
const o_card_last = clonedeep(o_card_prototype);
|
|
36
37
|
|
|
@@ -42,6 +43,7 @@ o_card_last.c_title.c_title_url = '#';
|
|
|
42
43
|
o_card_last.c_lazy_image = false;
|
|
43
44
|
o_card_last.c_span = false;
|
|
44
45
|
o_card_last.c_timestamp = false;
|
|
46
|
+
o_card_last.o_card_tag_text = 'div';
|
|
45
47
|
|
|
46
48
|
module.exports = {
|
|
47
49
|
injected_related_content_classes: 'lrv-u-border-t-1 lrv-u-padding-t-025',
|
|
@@ -5,12 +5,14 @@ const c_span_prototype = require( '../../components/c-span/c-span.prototype' );
|
|
|
5
5
|
const c_timestamp_prototype = require( '../../components/c-timestamp/c-timestamp.prototype' );
|
|
6
6
|
const c_heading_prototype = require( '../../components/c-heading/c-heading.prototype' );
|
|
7
7
|
const c_title_prototype = require( '../../components/c-title/c-title.prototype' );
|
|
8
|
+
const c_svg_prototype = require( '../../components/c-svg/c-svg.prototype' );
|
|
8
9
|
|
|
9
10
|
const o_card = clonedeep( o_card_prototype );
|
|
10
11
|
const c_span = clonedeep( c_span_prototype );
|
|
11
12
|
const c_timestamp = clonedeep( c_timestamp_prototype );
|
|
12
13
|
const c_heading = clonedeep( c_heading_prototype );
|
|
13
14
|
const c_title = clonedeep( c_title_prototype );
|
|
15
|
+
const c_svg = clonedeep( c_svg_prototype );
|
|
14
16
|
|
|
15
17
|
c_heading.c_heading_text = 'Newswire';
|
|
16
18
|
c_heading.c_heading_classes = 'lrv-u-font-family-primary lrv-u-font-size-32 lrv-u-margin-b-050';
|
|
@@ -23,7 +25,7 @@ c_title.c_title_text = 'Lorem ipsum dolor, sit amet consectetur adipisicing elit
|
|
|
23
25
|
c_title.c_title_classes += ' lrv-u-font-size-12 lrv-u-font-size-14@desktop lrv-u-font-weight-normal lrv-u-margin-b-050';
|
|
24
26
|
c_title.c_title_url = false;
|
|
25
27
|
|
|
26
|
-
o_card.o_card_classes = 'lrv-u-flex lrv-u-flex-direction-column
|
|
28
|
+
o_card.o_card_classes = 'lrv-u-flex lrv-u-flex-direction-column';
|
|
27
29
|
o_card.o_card_link_url = '#';
|
|
28
30
|
o_card.o_card_link_classes = 'lrv-a-unstyle-link lrv-u-display-block';
|
|
29
31
|
o_card.o_card_image_wrap_classes = '';
|
|
@@ -32,8 +34,12 @@ o_card.c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-4x3';
|
|
|
32
34
|
o_card.c_span = c_span;
|
|
33
35
|
o_card.c_title = c_title;
|
|
34
36
|
o_card.c_timestamp = c_timestamp;
|
|
37
|
+
o_card.c_svg = c_svg;
|
|
35
38
|
|
|
36
39
|
module.exports = {
|
|
40
|
+
newswire_classes: 'lrv-a-wrapper lrv-u-padding-b-2',
|
|
41
|
+
newswire_list_classes: 'lrv-a-unstyle-list js-Flickity js-Flickity--fourths js-Flickity--isContained js-Flickity--nav-top-right js-Flickity--bordered-buttons js-Flickity--isFreeScrol js-Flickity--newswire lrv-u-padding-l-00',
|
|
42
|
+
newswire_list_item_classes: 'js-Flickity-cell lrv-u-margin-r-150',
|
|
37
43
|
c_heading: c_heading,
|
|
38
44
|
newswire_aria_labelledby_attr: c_heading.c_heading_id_attr,
|
|
39
45
|
newswire_items: [ o_card, o_card, o_card, o_card, o_card ]
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
<section class="newswire //
|
|
1
|
+
<section class="newswire // {{ newswire_classes }}">
|
|
2
2
|
{% if c_heading %}
|
|
3
3
|
{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
|
|
4
4
|
{% endif %}
|
|
5
|
-
<ul class="
|
|
5
|
+
<ul class="{{ newswire_list_classes }}"
|
|
6
6
|
{% if newswire_aria_labelledby_attr %}
|
|
7
7
|
aria-labelledby="{{ newswire_aria_labelledby_attr }}"
|
|
8
8
|
{% endif %}
|
|
9
9
|
>
|
|
10
10
|
{% for item in newswire_items %}
|
|
11
|
-
<li class="
|
|
11
|
+
<li class="{{ newswire_list_item_classes }}">
|
|
12
12
|
{% include "@larva/objects/o-card/o-card.twig" with item %}
|
|
13
13
|
</li>
|
|
14
14
|
{% endfor %}
|
|
@@ -3,9 +3,13 @@ const clonedeep = require( 'lodash.clonedeep' );
|
|
|
3
3
|
|
|
4
4
|
const story_grid = __experimentalCloneWithFallback( 'modules/story-grid/story-grid.prototype' );
|
|
5
5
|
const story_prototype = __experimentalCloneWithFallback( 'modules/story/story.prototype' );
|
|
6
|
+
const c_span = __experimentalCloneWithFallback( 'components/c-span/c-span.prototype' );
|
|
6
7
|
|
|
7
8
|
story_grid.story_grid_story_cards = story_grid.story_grid_story_cards.map( () => clonedeep( story_prototype ) );
|
|
8
9
|
|
|
9
10
|
story_grid.story_grid_grid_classes = '';
|
|
10
11
|
|
|
12
|
+
c_span.c_span_text = 'Read more';
|
|
13
|
+
story_grid.c_span = c_span;
|
|
14
|
+
|
|
11
15
|
module.exports = story_grid;
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
<div class="story-grid lrv-u-padding-tb-1 lrv-u-padding-tb-2@desktop // {{ story_grid_classes }}">
|
|
2
|
-
<ul class="{{ story_grid_grid_classes }} // lrv-a-unstyle-list lrv-
|
|
2
|
+
<ul class="{{ story_grid_grid_classes }} // lrv-a-unstyle-list lrv-u-margin-b-050">
|
|
3
3
|
{% for item in story_grid_story_cards %}
|
|
4
|
-
<li>
|
|
4
|
+
<li class="{{ story_grid_grid_item_classes }}">
|
|
5
5
|
{% include "@larva/modules/story/story.twig" with item %}
|
|
6
6
|
</li>
|
|
7
7
|
{% endfor %}
|
|
8
8
|
</ul>
|
|
9
|
+
{% if c_span %}
|
|
10
|
+
{% include "@larva/components/c-span/c-span.twig" with c_span %}
|
|
11
|
+
{% endif %}
|
|
9
12
|
</div>
|
|
@@ -29,6 +29,10 @@
|
|
|
29
29
|
{% include "@larva/objects/o-span-group/o-span-group.twig" with o_span_group %}
|
|
30
30
|
{% endif %}
|
|
31
31
|
|
|
32
|
+
{% if c_svg %}
|
|
33
|
+
{% include "@larva/components/c-svg/c-svg.twig" with c_svg %}
|
|
34
|
+
{% endif %}
|
|
35
|
+
|
|
32
36
|
{% if c_span %}
|
|
33
37
|
{% include "@larva/components/c-span/c-span.twig" with c_span %}
|
|
34
38
|
{% endif %}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@penskemediacorp/larva-patterns",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.3",
|
|
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": "^0.
|
|
24
|
-
"@penskemediacorp/larva-js": "^0.
|
|
25
|
-
"@penskemediacorp/larva-svg": "^0.
|
|
23
|
+
"@penskemediacorp/larva-css": "^0.6.3",
|
|
24
|
+
"@penskemediacorp/larva-js": "^0.6.0",
|
|
25
|
+
"@penskemediacorp/larva-svg": "^0.6.0",
|
|
26
26
|
"lodash.clonedeep": "^4.5.0"
|
|
27
27
|
},
|
|
28
|
-
"gitHead": "
|
|
28
|
+
"gitHead": "f0ffbd9ac9ba9b13889ade0e4dbc9c94f9e6dd11"
|
|
29
29
|
}
|