@penskemediacorp/larva-patterns 0.5.8-alpha.0 → 0.6.2

package/components/c-lazy-image/c-lazy-image.prototype.js

@@ -4,6 +4,7 @@ module.exports = {
 	c_lazy_image_link_classes: 'lrv-a-unstyle-link',
 	c_lazy_image_crop_class: 'lrv-a-crop-16x9',
 	c_lazy_image_crop_style_attr: false,
+	c_lazy_image_link_tab_index_attr: false,
 	c_lazy_image_alt_attr: 'Lazy loaded image',
 	c_lazy_image_src_url: 'https://farm5.staticflickr.com/4078/5441060528_31db7838ba_z.jpg',
 	c_lazy_image_placeholder_url: 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==',

package/components/c-lazy-image/c-lazy-image.twig

@@ -1,6 +1,10 @@
 <div class="c-lazy-image {{ modifier_class }} {{ c_lazy_image_classes }}">
 	{% if c_lazy_image_link_url %}
-		<a href="{{ c_lazy_image_link_url }}" class="c-lazy-image__link {{ c_lazy_image_link_classes }}">
+		<a href="{{ c_lazy_image_link_url }}" class="c-lazy-image__link {{ c_lazy_image_link_classes }}"
+			{% if c_lazy_image_link_tab_index_attr %}
+				tabindex="{{ c_lazy_image_link_tab_index_attr }}"
+			{% endif %}
+		>
 	{% endif %}
 
 	{% if c_lazy_image_crop_class %}

package/modules/content-showcase/content-showcase.prototype.js

@@ -0,0 +1,29 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const o_card = clonedeep( require( '@penskemediacorp/larva-patterns/objects/o-card/o-card.prototype' ) );
+const c_dek =  clonedeep( require( '@penskemediacorp/larva-patterns/components/c-dek/c-dek.prototype' ) );
+
+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';
+o_card.o_card_link_classes = 'lrv-u-flex';
+o_card.o_card_link_url = '#';
+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';
+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';
+
+o_card.c_lazy_image.c_lazy_image_link_url = '';
+o_card.c_lazy_image.c_lazy_image_classes = 'lrv-u-margin-l-auto';
+o_card.c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-1x1';
+
+o_card.o_span_group = false;
+o_card.c_span = false;
+o_card.c_title.c_title_url = '';
+o_card.c_timestamp = false;
+o_card.c_tagline = false;
+o_card.o_author = false;
+
+o_card.c_dek = c_dek;
+o_card.c_dek.c_dek_text = 'Perfection is rarely achieved in movies, but this heaven-sent concert doc hits the sweet spot.';
+
+module.exports = {
+    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',
+    content_showcase_items: [ o_card, o_card, o_card ]
+}

package/modules/content-showcase/content-showcase.twig

@@ -0,0 +1,7 @@
+<div class="content-showcase larva // {{ content_showcase_classes }}">
+	<div class="content-showcase-items // {{ content_showcase_items_classes }}">
+		{% for item in content_showcase_items %}
+			{% include "@larva/objects/o-card/o-card.twig" with item %}
+		{% endfor %}
+	</div>
+</div>

package/modules/injected-related-content/injected-related-content.prototype.js

@@ -11,7 +11,7 @@ const c_title = clonedeep(c_title_prototype);
 
 c_title.c_title_text = 'Chronixx Says Some Dancehall Lyrics Are ‘Embarrassing’, Artists Should Stop Calling Him For Features';
 c_title.c_title_classes = 'lrv-a-font-primary-xs lrv-u-color-black lrv-u-padding-t-125';
-c_title.c_title_link_classes = 'lrv-a-font-primary-xs lrv-u-color-black lrv-a-truncate-ellipsis-5line@desktop-xl-max lrv-a-truncate-ellipsis-3line@desktop-xl';
+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';
 c_title.c_title_url = '#';
 
 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 = '#';
 o_card_first.c_lazy_image = false;
 o_card_first.c_span = false;
 o_card_first.c_timestamp = false;
+o_card_first.o_card_tag_text = 'div';
 
 const o_card_last = clonedeep(o_card_prototype);
 
@@ -42,6 +43,7 @@ o_card_last.c_title.c_title_url = '#';
 o_card_last.c_lazy_image = false;
 o_card_last.c_span = false;
 o_card_last.c_timestamp = false;
+o_card_last.o_card_tag_text = 'div';
 
 module.exports = {
     injected_related_content_classes: 'lrv-u-border-t-1 lrv-u-padding-t-025',

package/modules/paragraph/paragraph.twig

@@ -1,3 +1,3 @@
 <p class="paragraph larva // {{ paragraph_classes }} {{ paragraph_typography_class }} {{ paragraph_text_align_class }} {{ paragraph_color_class }} {{ paragraph_background_color_class }}">
-	{{ paragraph_markup }}
+	{{ paragraph_markup|raw }}
 </p>

package/modules/story-grid/story-grid.river.js

@@ -3,9 +3,13 @@ const clonedeep = require( 'lodash.clonedeep' );
 
 const story_grid = __experimentalCloneWithFallback( 'modules/story-grid/story-grid.prototype' );
 const story_prototype = __experimentalCloneWithFallback( 'modules/story/story.prototype' );
+const c_span = __experimentalCloneWithFallback( 'components/c-span/c-span.prototype' );
 
 story_grid.story_grid_story_cards = story_grid.story_grid_story_cards.map( () => clonedeep( story_prototype ) );
 
 story_grid.story_grid_grid_classes = '';
 
+c_span.c_span_text = 'Read more'; 
+story_grid.c_span = c_span;
+
 module.exports = story_grid;

package/modules/story-grid/story-grid.twig

@@ -1,9 +1,12 @@
 <div class="story-grid lrv-u-padding-tb-1 lrv-u-padding-tb-2@desktop // {{ story_grid_classes }}">
-	<ul class="{{ story_grid_grid_classes }} // lrv-a-unstyle-list lrv-a-space-children-horizontal lrv-a-space-children--050 lrv-u-margin-b-050">
+	<ul class="{{ story_grid_grid_classes }} // lrv-a-unstyle-list lrv-u-margin-b-050">
 		{% for item in story_grid_story_cards %}
-			<li>
+			<li class="{{ story_grid_grid_item_classes }}">
 				{% include "@larva/modules/story/story.twig" with item %}
 			</li>
 		{% endfor %}
 	</ul>
+	{% if c_span %}
+		{% include "@larva/components/c-span/c-span.twig" with c_span %}
+	{% endif %}
 </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@penskemediacorp/larva-patterns",
-  "version": "0.5.8-alpha.0",
+  "version": "0.6.2",
   "description": "Larva markup patterns.",
   "author": "laras126 <laras126@gmail.com>",
   "homepage": "https://github.com/Penske-Media-Corp/pmc-larva/tree/master/packages/patterns#readme",
@@ -20,10 +20,10 @@
     "url": "https://github.com/Penske-Media-Corp/pmc-larva/issues"
   },
   "dependencies": {
-    "@penskemediacorp/larva-css": "^0.5.8-alpha.0",
-    "@penskemediacorp/larva-js": "^0.5.6",
-    "@penskemediacorp/larva-svg": "^0.5.0",
+    "@penskemediacorp/larva-css": "^0.6.2",
+    "@penskemediacorp/larva-js": "^0.6.0",
+    "@penskemediacorp/larva-svg": "^0.6.0",
     "lodash.clonedeep": "^4.5.0"
   },
-  "gitHead": "a55f272dab11a87a9b427deb0db4a6eb1072cf76"
+  "gitHead": "c54da41f516960a630885fb7ce9bd12bc00dff6e"
 }