@penskemediacorp/larva-patterns 1.2.0 → 1.4.0

package/modules/article-timestamp/article-timestamp.prototype.js

@@ -0,0 +1,13 @@
+const clonedeep = require('lodash.clonedeep');
+
+const c_timestamp_prototype = require('@penskemediacorp/larva-patterns/components/c-timestamp/c-timestamp.prototype');
+
+const c_timestamp = clonedeep(c_timestamp_prototype);
+c_timestamp.c_timestamp_classes = 'lrv-u-font-size-14 lrv-u-text-transform-uppercase lrv-u-color-black lrv-u-display-inline-block';
+c_timestamp.c_timestamp_text = 'September 3, 2019 7:51pm';
+c_timestamp.c_timestamp_datetime_attr = '2019-09-03';
+
+module.exports = {
+	article_timestamp_classes: 'lrv-u-display-block lrv-u-margin-t-050@mobile-max',
+	c_timestamp: c_timestamp,
+};

package/modules/article-timestamp/article-timestamp.twig

@@ -0,0 +1,5 @@
+<div class="article-timestamp // {{ article_timestamp_classes }}">
+	{% if c_timestamp %}
+		{% include "@larva/components/c-timestamp/c-timestamp.twig" with c_timestamp %}
+	{% endif %}
+</div>

package/modules/featured-stories/featured-stories.prototype.js

@@ -1,6 +1,7 @@
 const clonedeep = require( 'lodash.clonedeep' );
 
 const story_prototype = require( '@penskemediacorp/larva-patterns/modules/story/story.prototype' );
+const article_kicker = require( '@penskemediacorp/larva-patterns/modules/article-kicker/article-kicker.prototype' );
 
 const story = clonedeep( story_prototype );
 
@@ -12,6 +13,9 @@ story.story_grid_secondary_classes += ' lrv-u-padding-lr-1 lrv-u-padding-lr-2@de
 
 const featured_story = clonedeep( story );
 
+story.article_kicker = article_kicker;
+story.c_span = false;
+
 /**
  * Budle all objects.
  */

package/modules/hero-image-story/hero-image-story.prototype.js

@@ -0,0 +1,41 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const o_figure = clonedeep( require( '../../objects/o-figure/o-figure.prototype.js' ) );
+const story = clonedeep( require( '../story/story.center-vertical' ) );
+const article_kicker_prototype = clonedeep( require( '../article-kicker/article-kicker.prototype' ) );
+
+o_figure.c_figcaption.c_figcaption_caption_markup = 'test';
+o_figure.c_lazy_image.c_lazy_image_placeholder_url = 'https://picsum.photos/1000/1000';
+o_figure.c_lazy_image.c_lazy_image_classes = 'lrv-a-wrapper-100vw@mobile-max';
+o_figure.c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-3x2';
+o_figure.o_figure_classes = 'lrv-a-glue-parent@tablet';
+o_figure.c_figcaption.c_figcaption_classes = 'lrv-u-color-white lrv-a-glue@tablet lrv-a-glue-parent@mobile-max lrv-u-flex lrv-u-flex-direction-column lrv-a-glue--b-0 lrv-a-glue--l-0 lrv-u-width-20p lrv-u-width-100p@mobile-max lrv-u-align-items-center';
+o_figure.c_figcaption.c_figcaption_credit_classes = 'lrv-a-font-primary-xl lrv-u-padding-tb-125@mobile-max lrv-u-border-b-1@mobile-max lrv-u-text-align-center@tablet lrv-u-text-transform-uppercase lrv-u-font-family-secondary';
+o_figure.c_figcaption.c_figcaption_credit_text = 'Prince Dead At 57';
+o_figure.c_figcaption.c_figcaption_caption_classes = 'u-background-white@mobile-max lrv-a-glue@mobile-max lrv-a-glue--b-unset@mobile-max lrv-a-glue--t-0 lrv-a-glue--l-0 lrv-u-transform-translateY-n50p lrv-u-font-family-secondary lrv-u-font-size-20 u-line-height-18 u-letter-spacing-012 lrv-u-border-t-5 lrv-u-border-b-1 lrv-u-padding-tb-050 lrv-u-padding-lr-125';
+o_figure.c_figcaption.c_figcaption_caption_markup = '1958 – 2021';
+
+//story.c_lazy_image = false;
+story.c_dek = false;
+story.c_timestamp = false;
+story.c_link_bottom = false;
+story.c_span = false;
+story.article_kicker = clonedeep( article_kicker_prototype );
+story.story_grid_primary_classes = 'lrv-a-hidden@tablet lrv-u-margin-b-150@mobile-max';
+story.story_classes = 'lrv-a-grid-item lrv-u-padding-t-125@mobile-max lrv-u-border-l-00@mobile-max';
+story.c_title.c_title_classes = 'lrv-a-font-primary-xs';
+story.story_links_classes = 'lrv-u-justify-content-center@tablet lrv-u-margin-b-00';
+story.story_grid_secondary_classes = 'lrv-a-span2 lrv-u-color-brand-primary:hover lrv-u-padding-lr-1 lrv-u-padding-lr-2@desktop-xl lrv-u-text-align-center@tablet';
+story.c_tagline_author_wrapper_classes = 'lrv-u-text-transform-uppercase lrv-u-font-size-12 lrv-u-line-height-copy u-letter-spacing-011';
+story.story_nav_layout_classes = 'lrv-u-flex lrv-u-align-items-center lrv-a-space-children-horizontal lrv-a-space-children--2 lrv-u-margin-t-075';
+story.story_nav_classes = 'lrv-u-font-size-12 lrv-u-font-family-body lrv-u-justify-content-center@tablet';
+module.exports = {	
+	wrapper_classes: 'lrv-u-padding-lr-150@mobile-max',
+	stories_outer_classes: 'lrv-a-grid lrv-a-cols3@tablet lrv-a-children-border-horizontal lrv-a-children-border-vertical@mobile-max lrv-u-padding-tb-150 lrv-u-padding-tb-00@mobile-max',
+	o_figure,
+	stories: [
+		story,
+		story,
+		story,
+	],
+};

package/modules/hero-image-story/hero-image-story.twig

@@ -0,0 +1,8 @@
+<div class="hero-image-story-module // {{ wrapper_classes }}">
+	{% include "@larva/objects/o-figure/o-figure.twig" with o_figure %}
+	<div class="stories-outer {{ stories_outer_classes }}">
+		{% for item in stories %}
+			{% include "@larva/modules/story/story.twig" with item %}
+		{% endfor %}
+	</div>
+</div>

package/modules/paragraph/paragraph.narrow.js

@@ -0,0 +1,8 @@
+const clonedeep = require('lodash.clonedeep');
+
+const paragraph_prototype = require( './paragraph.prototype' );
+const paragraph_narrow = clonedeep( paragraph_prototype );
+
+paragraph_narrow.paragraph_classes += ' lrv-u-width-75p';
+
+module.exports = paragraph_narrow;

package/modules/paragraph/paragraph.prototype.js

@@ -1,5 +1,5 @@
 module.exports = {
-	paragraph_classes: 'lrv-u-width-75p lrv-u-margin-lr-auto',
+	paragraph_classes: 'lrv-u-margin-lr-auto',
 	paragraph_typography_class: 'lrv-a-font-body-m',
 	paragraph_text_align_class: '',
 	paragraph_color_class: '',

package/modules/story-featured-quote/story-featured-quote.prototype.js

@@ -3,18 +3,13 @@ const clonedeep = require( 'lodash.clonedeep' );
 
 
 const c_title = __experimentalCloneWithFallback( 'components/c-title/c-title.prototype' );
-const c_dek = __experimentalCloneWithFallback( 'components/c-dek/c-dek.prototype' );
 const c_tagline = __experimentalCloneWithFallback( 'components/c-tagline/c-tagline.prototype' );
-
 const c_tagline_author = clonedeep( c_tagline );
 
 c_title.c_title_text = '‘A Momentous Weekend’: LACMA’s High-Stakes Collectors Committee Event Raises $2.4 M.';
 c_title.c_title_classes = 'lrv-u-font-size-14 lrv-u-font-family-primary lrv-u-display-block lrv-u-font-weight-normal lrv-u-line-height-small';
 c_title.c_title_link_classes = 'lrv-a-unstyle-link lrv-u-color-brand-primary:hover';
 
-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-a-font-primary-l';
 
 c_tagline_author.c_tagline_classes = 'lrv-u-margin-l-050';
 c_tagline_author.c_tagline_markup = "<a href='#'>Staff Writer</a>";
@@ -22,10 +17,11 @@ c_tagline_author.c_tagline_text = false;
 
 module.exports = {
     story_featured_quote_classes: 'lrv-u-text-align-center',
+    story_quote_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.',
+    story_quote_markup_classes: 'lrv-a-font-primary-l',
     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 lrv-u-justify-content-center',
     c_title: c_title,
-    c_dek: c_dek,
     c_dek_url:'#',
     c_dek_url_classes:'lrv-u-color-black lrv-a-unstyle-link',
     c_tagline_author,

package/modules/story-featured-quote/story-featured-quote.twig

@@ -3,8 +3,10 @@
 		{% if c_dek_url %}
 		<a href="{{ c_dek_url }}" class="c-dek__link ">
 			{% endif %}
-			{% if c_dek %}
-				{% include "@larva/components/c-dek/c-dek.twig" with c_dek %}
+			{% if story_quote_markup %}
+				<p class="story-quote-markup {{ story_quote_markup_classes }}">
+					{{ story_quote_markup|raw }}
+				</p>
 			{% endif %}
 			{% if c_dek_url %}
 		</a>

package/modules/top-stories/top-stories.xl.js

@@ -0,0 +1,14 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const top_stories = clonedeep( require( './top-stories.prototype' ) );
+
+top_stories.o_story_featured.c_title.c_title_classes = 'lrv-a-font-primary-xl c-title lrv-u-display-block lrv-u-margin-b-050';
+top_stories.o_story_featured.c_link_bottom = false;
+
+top_stories.stories.map( ( o_story ) => {
+	o_story.c_span = false;
+	o_story.c_link_bottom = false;
+});
+
+
+module.exports = top_stories;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@penskemediacorp/larva-patterns",
-  "version": "1.2.0",
+  "version": "1.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": "^1.2.0",
-    "@penskemediacorp/larva-js": "^1.0.0",
-    "@penskemediacorp/larva-svg": "^1.1.3",
+    "@penskemediacorp/larva-css": "^1.4.0",
+    "@penskemediacorp/larva-js": "^1.4.0",
+    "@penskemediacorp/larva-svg": "^1.4.0",
     "lodash.clonedeep": "^4.5.0"
   },
-  "gitHead": "65f0eb85b8371be9b4471000cfcda33fd7c578ef"
+  "gitHead": "112fe16c862df9ccd4d562d60a12a421f7780d34"
 }