@penskemediacorp/larva-patterns 0.3.12-develop.2 → 0.4.0

package/__tests__/hub/hub.prototype.js

@@ -1,14 +1,15 @@
 const clonedeep = require( 'lodash.clonedeep' );
+const { __experimentalCloneWithFallback } = require( '@penskemediacorp/larva' );
 
-const carousel_grid = clonedeep( require( '../../modules/carousel-grid/carousel-grid.prototype' ) );
-const carousel_slider = clonedeep( require( '../../modules/carousel-slider/carousel-slider.prototype' ) );
-const story_grid = clonedeep( require( '../../modules/story-grid/story-grid.prototype' ) );
-const heading_h1 = clonedeep( require( '../../modules/heading/heading.h1' ) );
-const heading_h3 = clonedeep( require( '../../modules/heading/heading.h3' ) );
-const story = clonedeep( require( '../../modules/story/story.prototype' ) );
-const button = clonedeep( require( '../../modules/button/button.prototype' ) );
-const paragraph = clonedeep( require( '../../modules/paragraph/paragraph.prototype' ) );
-const separator = clonedeep( require( '../../modules/separator/separator.prototype' ) );
+const carousel_grid = __experimentalCloneWithFallback( 'modules/carousel-grid/carousel-grid.prototype' );
+const carousel_slider = __experimentalCloneWithFallback( 'modules/carousel-slider/carousel-slider.prototype' );
+const story_grid = __experimentalCloneWithFallback( 'modules/story-grid/story-grid.prototype' );
+const heading_h1 = __experimentalCloneWithFallback( 'modules/heading/heading.h1' );
+const heading_h3 = __experimentalCloneWithFallback( 'modules/heading/heading.h3' );
+const story = __experimentalCloneWithFallback( 'modules/story/story.prototype' );
+const button = __experimentalCloneWithFallback( 'modules/button/button.prototype' );
+const paragraph = __experimentalCloneWithFallback( 'modules/paragraph/paragraph.prototype' );
+const separator = __experimentalCloneWithFallback( 'modules/separator/separator.prototype' );
 
 module.exports = {
 	carousel_grid,

package/components/c-span/c-span.tag.js

@@ -1,8 +1,6 @@
 const clonedeep = require( 'lodash.clonedeep' );
 const c_span = clonedeep( require( './c-span.prototype' ) );
 
-c_span.c_span_classes += ' lrv-u-color-brand-primary lrv-u-font-size-12 lrv-u-font-size-14@tablet lrv-u-font-weight-bold lrv-u-text-transform-lowercase lrv-u-font-family-primary';
-c_span.c_span_link_classes = 'lrv-u-color-brand-primary-dark:hover';
 c_span.c_span_text = 'News';
 c_span.c_span_url = '#';
 

package/modules/carousel-grid/carousel-grid.overlay.js

@@ -1,8 +1,7 @@
 const clonedeep = require( 'lodash.clonedeep' );
+const { __experimentalCloneWithFallback } = require( '@penskemediacorp/larva' );
 
-const carousel_grid_prototype = require( './carousel-grid.prototype' );
-
-const carousel_grid_overlay = clonedeep( carousel_grid_prototype );
+const carousel_grid_overlay = __experimentalCloneWithFallback( 'modules/carousel-grid/carousel-grid.prototype' );
 
 carousel_grid_overlay.o_card_large.o_card_classes = 'lrv-a-carousel-grid__overlay--primary';
 carousel_grid_overlay.o_card_large.o_card_content_classes += ' lrv-a-carousel-grid__overlay--primary-content';

package/modules/carousel-grid/carousel-grid.prototype.js

@@ -1,7 +1,8 @@
 const clonedeep = require( 'lodash.clonedeep' );
+const { __experimentalCloneWithFallback } = require( '@penskemediacorp/larva' );
 
-const o_card_prototype = require( '../../objects/o-card/o-card.prototype' );
-const o_author = clonedeep(require('../../objects/o-author/o-author.prototype'));
+const o_card_prototype = clonedeep( require( '../../objects/o-card/o-card.prototype' ) );
+const o_author = __experimentalCloneWithFallback( 'objects/o-author/o-author.prototype' );
 const o_card = clonedeep( o_card_prototype );
 
 o_card.o_card_classes = 'lrv-u-margin-b-1';

package/modules/carousel-slider/carousel-slider.prototype.js

@@ -1,4 +1,5 @@
 const clonedeep = require( 'lodash.clonedeep' );
+const { __experimentalCloneWithFallback } = require( '@penskemediacorp/larva' );
 
 const c_heading_prototype = require( '../../components/c-heading/c-heading.prototype' );
 const c_heading = clonedeep( c_heading_prototype );
@@ -9,16 +10,9 @@ const c_icon = clonedeep( c_icon_prototype );
 const o_card_prototype = require( '../../objects/o-card/o-card.prototype' );
 const o_card = clonedeep( o_card_prototype );
 
-const o_indicator_prototype = require( '../../objects/o-indicator/o-indicator.prototype' );
-const o_indicator = clonedeep( o_indicator_prototype );
+const o_indicator_photos = __experimentalCloneWithFallback( 'objects/o-indicator/o-indicator.photos' );
 
-o_indicator.c_icon = clonedeep( c_icon );
-o_indicator.c_icon.c_icon_name = 'gallery';
-o_indicator.c_span.c_span_text = 'Photos';
-o_indicator.c_span.c_span_classes += ' lrv-u-margin-l-050 lrv-u-text-transform-uppercase lrv-a-font-secondary-s';
-o_indicator.o_indicator_classes += ' lrv-u-flex lrv-u-background-color-black lrv-u-color-white lrv-u-padding-a-050 lrv-u-border-radius-5 lrv-u-margin-a-050';
-
-o_card.o_indicator = o_indicator;
+o_card.o_indicator = o_indicator_photos;
 
 o_card.o_card_link_url = '#';
 o_card.o_card_link_classes = 'lrv-a-unstyle-link lrv-u-display-block';

package/modules/story/story.borders.js

@@ -1,4 +1,4 @@
-const __experimentalCloneWithFallback = require( '@penskemediacorp/larva' ).clone;
+const { __experimentalCloneWithFallback } = require( '@penskemediacorp/larva' );
 
 const story_borders = __experimentalCloneWithFallback( 'modules/story/story.prototype' );
 

package/modules/story/story.prototype.js

@@ -1,4 +1,4 @@
-const __experimentalCloneWithFallback = require( '@penskemediacorp/larva' ).clone;
+const { __experimentalCloneWithFallback } = require( '@penskemediacorp/larva' );
 const clonedeep = require( 'lodash.clonedeep' );
 
 const c_span = __experimentalCloneWithFallback( 'components/c-span/c-span.tag' );
@@ -14,19 +14,19 @@ c_title.c_title_text = '‘A Momentous Weekend’: LACMA’s High-Stakes Collect
 c_title.c_title_classes = 'lrv-u-font-size-14 lrv-u-font-size-26@tablet lrv-u-font-size-32@desktop lrv-u-font-family-primary lrv-u-display-block lrv-u-font-weight-normal lrv-u-font-weight-bold@desktop lrv-u-line-height-small lrv-u-margin-b-050';
 c_title.c_title_link_classes = 'lrv-a-unstyle-link lrv-u-color-brand-primary:hover';
 
-c_dek.c_dek_text = '';
+c_dek.c_dek_text = false;
 c_dek.c_dek_markup = 'Lorem ipsum <i>dolor</i> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.';
-c_dek.c_dek_classes = 'lrv-u-font-weight-light lrv-u-font-size-16 lrv-u-font-size-18@desktop-xl lrv-a-hidden@mobile-max lrv-u-margin-a-00';
 
-c_tagline.c_tagline_classes = 'lrv-u-margin-l-050';
-c_tagline.c_tagline_markup = "<a href='#'>Staff Writter</a>";
-c_tagline.c_tagline_text = false;
+c_tagline_author.c_tagline_classes = 'lrv-u-margin-l-050';
+c_tagline_author.c_tagline_markup = "<a href='#'>Staff Writer</a>";
+c_tagline_author.c_tagline_text = false;
 
 c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-2x3';
 
 module.exports = {
 	story_classes: '',
-	story_nav_classes: 'lrv-u-font-size-12 lrv-u-font-family-primary lrv-u-text-transform-uppercase lrv-u-font-weight-bold',
+	story_nav_classes: 'lrv-u-font-size-12 lrv-u-font-family-primary lrv-u-text-transform-uppercase lrv-u-font-weight-bold lrv-u-color-black ',
+	story_nav_layout_classes: 'lrv-u-flex lrv-u-align-items-center lrv-a-space-children-horizontal lrv-a-space-children--2 lrv-a-hidden@mobile-max lrv-u-margin-t-050',
 	story_grid_classes: 'lrv-a-grid lrv-a-cols3',
 	story_grid_primary_classes: 'lrv-u-margin-r-2@desktop-xl lrv-u-margin-r-00 lrv-u-margin-r-1@desktop',
 	story_grid_secondary_classes: 'lrv-a-span2',
@@ -35,9 +35,9 @@ module.exports = {
 	c_link: false,
 	c_link_bottom: false,
 	c_link_bottom_wrapper_classes: '',
-	c_title,
-	c_dek,
-	c_lazy_image,
+	c_title: c_title,
+	c_dek: c_dek,
+	c_lazy_image: c_lazy_image,
 	c_tagline_author,
 	c_timestamp,
 };

package/modules/story/story.right.js

@@ -1,4 +1,4 @@
-const __experimentalCloneWithFallback = require( '@penskemediacorp/larva' ).clone;
+const { __experimentalCloneWithFallback } = require( '@penskemediacorp/larva' );
 
 const story_right = __experimentalCloneWithFallback( 'modules/story/story.prototype' );
 

package/modules/story/story.twig

@@ -21,9 +21,9 @@
 
 			<ul class="lrv-u-flex lrv-u-order-n1 lrv-a-unstyle-list lrv-a-space-children-horizontal lrv-a-space-children--050 lrv-u-margin-b-050 u-letter-spacing-012 // {{ story_links_classes }}">
 
-				{% if c_link %}
+				{% if c_link_top %}
 					<li>
-						{% include "@larva/components/c-link/c-link.twig" with c_link %}
+						{% include "@larva/components/c-link/c-link.twig" with c_link_top %}
 					</li>
 				{% endif %}
 
@@ -34,7 +34,7 @@
 				{% endif %}
 			</ul>
 
-			<ul class="lrv-a-unstyle-list lrv-u-flex lrv-u-align-items-center lrv-u-color-black lrv-a-space-children-horizontal lrv-a-space-children--2 lrv-a-hidden@mobile-max lrv-u-margin-t-050 // {{ story_nav_classes }}">
+			<ul class="lrv-a-unstyle-list // {{ story_nav_classes }} {{ story_nav_layout_classes }}">
 				{% if c_button %}
 					<li class="lrv-u-flex">
 						{% include "@larva/components/c-button/c-button.twig" with c_button %}
@@ -54,8 +54,14 @@
 				{% endif %}
 			</ul>
 
+			{% if c_link %}
+				<div>
+					{% include "@larva/components/c-link/c-link.twig" with c_link %}
+				</div>
+			{% endif %}
+
 			{% if c_link_bottom %}
-				<ul class="lrv-u-flex lrv-u-order-100 lrv-a-unstyle-list lrv-a-space-children-horizontal lrv-a-space-children--050 lrv-u-margin-t-050 u-letter-spacing-012 // {{ c_link_bottom_wrapper_classes }}">
+				<ul class="lrv-u-flex lrv-u-order-100 lrv-a-unstyle-list lrv-a-space-children-horizontal lrv-a-space-children--050 lrv-u-margin-t-050 // {{ c_link_bottom_wrapper_classes }}">
 					{% if c_link_bottom %}
 						<li>
 							{% include "@larva/components/c-link/c-link.twig" with c_link_bottom %}

package/modules/story/story.vertical.js

@@ -1,4 +1,4 @@
-const __experimentalCloneWithFallback = require( '@penskemediacorp/larva' ).clone;
+const { __experimentalCloneWithFallback } = require( '@penskemediacorp/larva' );
 
 const story_vertical = __experimentalCloneWithFallback( 'modules/story/story.prototype' );
 

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

@@ -1,12 +1,9 @@
-const clonedeep = require( 'lodash.clonedeep' );
+const { __experimentalCloneWithFallback } = require( '@penskemediacorp/larva' );
 
-const story_card = clonedeep( require( '../story/story.vertical' ) );
+const story_card = __experimentalCloneWithFallback( 'modules/story/story.vertical' );
 
 story_card.c_dek.c_dek_classes = 'lrv-a-font-body-s lrv-a-hidden@mobile-max lrv-u-margin-a-00';
 story_card.c_title.c_title_classes = 'lrv-a-font-primary-xxs lrv-u-display-block lrv-u-margin-b-050';
-story_card.c_tagline_author_wrapper_classes += ' lrv-u-align-items-center';
-story_card.c_tagline_author.c_tagline_classes += ' lrv-u-margin-tb-00 lrv-u-padding-l-050';
-story_card.c_tagline_author.c_tagline_text = 'John Doe';
 story_card.story_grid_secondary_classes = 'lrv-a-span2';
 story_card.story_links_classes += ' lrv-u-margin-t-050';
 story_card.story_nav_classes = 'lrv-a-font-secondary-m';

package/modules/vlanding-video-card/vlanding-video-card.twig

@@ -19,13 +19,10 @@
 
 		<div class="{{ vlanding_video_card_crop_class }}" data-video-showcase-active-text="{{ vlanding_video_card_active_txt_attr }}">
 
-			{# TODO: Can we use image tag here, we need vlanding_video_card_crop_data_attr option with crop_classs #}
 			{% if c_lazy_image %}
 				{% include "@larva/components/c-lazy-image/c-lazy-image.twig" with c_lazy_image %}
 			{% endif %}
 
-			{# TODO: Need c_play_badge #}
-
 			{% if vlanding_video_card_is_player %}
 				<iframe hidden id="youtubePlayerContainer" frameborder="0" data-video-showcase-iframe></iframe>
 				<div hidden id="jwplayerContainer" data-video-showcase-jwplayer></div>

package/objects/o-author/o-author.prototype.js

@@ -1,7 +1,7 @@
-const clonedeep = require( 'lodash.clonedeep' );
+const { __experimentalCloneWithFallback } = require( '@penskemediacorp/larva' );
 
-const c_span = clonedeep( require( '../../components/c-span/c-span.prototype' ) );
-const c_timestamp = clonedeep( require( '../../components/c-timestamp/c-timestamp.prototype.js' ) );
+const c_span = __experimentalCloneWithFallback( 'components/c-span/c-span.prototype' );
+const c_timestamp = __experimentalCloneWithFallback( 'components/c-timestamp/c-timestamp.prototype' );
 
 c_span.c_span_text = 'Author Name';
 

package/objects/o-author/o-author.twig

@@ -1,6 +1,6 @@
 <div class="o-author // {{ o_author_classes }}">
 
-	<span>{{ o_author_text }}</span>
+	<span class="{{ o_author_by_classes }}">{{ o_author_text }}</span>
 
 	{% if c_span %}
 		{% include "@larva/components/c-span/c-span.twig" with c_span %}

package/objects/o-card/o-card.prototype.js

@@ -1,9 +1,10 @@
 const clonedeep = require( 'lodash.clonedeep' );
+const { __experimentalCloneWithFallback } = require( '@penskemediacorp/larva' );
 
+const c_span = __experimentalCloneWithFallback( 'components/c-span/c-span.tag' );
+const c_timestamp = __experimentalCloneWithFallback( 'components/c-timestamp/c-timestamp.prototype' );
 const c_lazy_image = clonedeep( require( '../../components/c-lazy-image/c-lazy-image.prototype.js' ) );
-const c_span = clonedeep( require( '../../components/c-span/c-span.prototype.js' ) );
 const c_title = clonedeep( require( '../../components/c-title/c-title.prototype.js' ) );
-const c_timestamp = clonedeep( require( '../../components/c-timestamp/c-timestamp.prototype.js' ) );
 
 module.exports = {
 	o_card_classes: '',

package/objects/o-header/o-header.twig

@@ -3,7 +3,6 @@
 		{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
 	{% endif %}
 
-	{# TODO: replace with c-logo when it is moved to Larva #}
 	{% if o_figure %}
 		{% include "@larva/objects/o-figure/o-figure.twig" with o_figure %}
 	{% endif %}

package/objects/o-indicator/o-indicator.photos.js

@@ -0,0 +1,12 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const o_indicator = clonedeep( require( './o-indicator.prototype' ) );
+const c_icon = clonedeep( require( '../../components/c-icon/c-icon.prototype' ) );
+
+o_indicator.c_icon = clonedeep( c_icon );
+o_indicator.c_icon.c_icon_name = 'gallery';
+o_indicator.c_span.c_span_text = 'Photos';
+o_indicator.c_span.c_span_classes += ' lrv-u-margin-l-050 lrv-u-text-transform-uppercase lrv-a-font-secondary-s';
+o_indicator.o_indicator_classes += ' lrv-u-flex lrv-u-background-color-black lrv-u-color-white lrv-u-padding-a-050 lrv-u-border-radius-5 lrv-u-margin-a-050';
+
+module.exports = o_indicator;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@penskemediacorp/larva-patterns",
-  "version": "0.3.12-develop.2+b32574b7",
+  "version": "0.4.0",
   "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.3.12-develop.2+b32574b7",
-    "@penskemediacorp/larva-js": "^0.3.5",
-    "@penskemediacorp/larva-svg": "^0.3.5",
+    "@penskemediacorp/larva-css": "^0.4.0",
+    "@penskemediacorp/larva-js": "^0.4.0",
+    "@penskemediacorp/larva-svg": "^0.4.0",
     "lodash.clonedeep": "^4.5.0"
   },
-  "gitHead": "b32574b752d4bed04d71681ab73f8fb0f8ae1ff1"
+  "gitHead": "99e5dc47f4a054fda8d8dfab354199a434cd4725"
 }